吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 8 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @280fcb8
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <easy-loadimage mode="widthFix" 6 <easy-loadimage mode="widthFix"
7 :scroll-top="scrollTop" 7 :scroll-top="scrollTop"
8 :image-src="goods.imgurl?goods.imgurl:goods.pic" 8 :image-src="goods.imgurl?goods.imgurl:goods.pic"
9 :viewHeight="viewHeight"></easy-loadimage> 9 :viewHeight="viewHeight"></easy-loadimage>
10 <!-- <image 10 <!-- <image
11 mode="widthFix" 11 mode="widthFix"
12 :src="goods.imgurl?goods.imgurl:goods.pic" 12 :src="goods.imgurl?goods.imgurl:goods.pic"
13 ></image> --> 13 ></image> -->
14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
15 <view class="info"> 15 <view class="info">
16 <view class="priceBox"> 16 <view class="priceBox">
17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
18 <view class="originCost"> 18 <view class="originCost">
19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="trade_num">{{goods.trade_num}}人购买</view> 23 <view class="trade_num">{{goods.trade_num}}人购买</view>
24 </view> 24 </view>
25 </view> 25 </view>
26 </template> 26 </template>
27 27
28 <script> 28 <script>
29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' 29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30 // const MockData = require('@/static/easy-loadimage/mock-data.json') 30 // const MockData = require('@/static/easy-loadimage/mock-data.json')
31 export default { 31 export default {
32 components:{easyLoadimage}, 32 components:{easyLoadimage},
33 props: { 33 props: {
34 /** 34 /**
35 * 商品数据 35 * 商品数据
36 */ 36 */
37 goods: { 37 goods: {
38 id: Number, 38 id: Number,
39 imgurl: String, 39 imgurl: String,
40 name: String, 40 name: String,
41 rsSon: Object, 41 rsSon: Object,
42 originCost: String, 42 originCost: String,
43 price: String, 43 price: String,
44 trade_num: String, 44 trade_num: String,
45 goodType: String, 45 goodType: String,
46 }, 46 },
47 scrollTop:Number, 47 scrollTop:Number,
48 viewHeight:Number, 48 viewHeight:Number,
49 }, 49 },
50 created () { 50 created () {
51 }, 51 },
52 data () { 52 data () {
53 return { 53 return {
54 54
55 } 55 }
56 }, 56 },
57 57
58 methods: { 58 methods: {
59 toGoods (id, skId) { 59 toGoods (id, skId) {
60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) 60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
61 uni.navigateTo({ 61 uni.navigateTo({
62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, 62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
63 success: res => {}, 63 success: res => {},
64 fail: () => {}, 64 fail: () => {},
65 complete: () => {}, 65 complete: () => {},
66 }) 66 })
67 }, 67 },
68 }, 68 },
69 } 69 }
70 </script> 70 </script>
71 71
72 <style lang="scss"> 72 <style lang="scss">
73 73
74 image { 74 image {
75 width: 100%; 75 width: 100%;
76 height: 120rpx; 76 height: 120rpx;
77 } 77 }
78 .name { 78 .name {
79 width: 92%; 79 width: 92%;
80 height: 56rpx; 80 height: 56rpx;
81 padding: 5px 4%; 81 padding: 5px 4%;
82 display: -webkit-box; 82 display: -webkit-box;
83 -webkit-box-orient: vertical; 83 -webkit-box-orient: vertical;
84 -webkit-line-clamp: 2; 84 -webkit-line-clamp: 2;
85 text-align: justify; 85 text-align: justify;
86 overflow: hidden; 86 overflow: hidden;
87 font-size: 26rpx; 87 font-size: 26rpx;
88 color: #333333; 88 color: #333333;
89 } 89 }
90 .info { 90 .info {
91 display: flex; 91 display: flex;
92 justify-content: space-between; 92 justify-content: space-between;
93 align-items: center; 93 align-items: center;
94 width: 92%; 94 width: 92%;
95 padding: 5px 4% 5px 4%; 95 padding: 5px 4% 5px 4%;
96 .priceBox { 96 .priceBox {
97 display: flex; 97 display: flex;
98 justify-content: space-between; 98 justify-content: space-between;
99 align-items: center; 99 align-items: center;
100 .price { 100 .price {
101 color: #eb5d3b; 101 color: #eb5d3b;
102 font-size: 28rpx; 102 font-size: 28rpx;
103 font-weight: 600; 103 font-weight: 600;
104 margin-right: 10rpx; 104 margin-right: 10rpx;
105 } 105 }
106 .originCost { 106 .originCost {
107 text-decoration: line-through; 107 text-decoration: line-through;
108 color: #999999; 108 color: #999999;
109 font-size: 20rpx; 109 font-size: 20rpx;
110 } 110 }
111 } 111 }
112 .trade_num { 112 .trade_num {
113 color: #999999; 113 color: #999999;
114 font-size: 20rpx; 114 font-size: 20rpx;
115 } 115 }
116 } 116 }
117 </style> 117 </style>
118 118
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @280fcb8
1 <template> 1 <template>
2 <view 2 <view
3 class="HMfilterDropdown" 3 class="HMfilterDropdown"
4 @touchmove.stop.prevent="discard" 4 @touchmove.stop.prevent="discard"
5 @tap.stop="discard" 5 @tap.stop="discard"
6 > 6 >
7 <view class="nav"> 7 <view class="nav">
8 <block 8 <block
9 v-for="(item,index) in menu" 9 v-for="(item,index) in menu"
10 :key="index" 10 :key="index"
11 > 11 >
12 <view 12 <view
13 class="first-menu" 13 class="first-menu"
14 :class="{'on':showPage==index || on[index] === 1}" 14 :class="{'on':showPage==index || on[index] === 1}"
15 @tap="togglePage(index, false)" 15 @tap="togglePage(index, false)"
16 v-if="!item.isNoPull" 16 v-if="!item.isNoPull"
17 > 17 >
18 <text class="name">{{item.name}}</text> 18 <text class="name">{{item.name}}</text>
19 <text 19 <text
20 class="iconfont triangle" 20 class="iconfont triangle"
21 :style="'transform:rotate('+triangleDeg[index]+'deg);'" 21 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
22 ></text> 22 ></text>
23 </view> 23 </view>
24 <view 24 <view
25 class="first-menu" 25 class="first-menu"
26 :class="{'on':showPage==index || on[index] === 1}" 26 :class="{'on':showPage==index || on[index] === 1}"
27 @tap="showAll()" 27 @tap="showAll()"
28 v-else 28 v-else
29 > 29 >
30 <text class="name">{{item.name}}</text> 30 <text class="name">{{item.name}}</text>
31 </view> 31 </view>
32 </block> 32 </block>
33 </view> 33 </view>
34 <view 34 <view
35 class="mask" 35 class="mask"
36 :class="{'show':isShowMask,'hide':maskVisibility!=true}" 36 :class="{'show':isShowMask,'hide':maskVisibility!=true}"
37 @tap="togglePage(showPage)" 37 @tap="togglePage(showPage)"
38 ></view> 38 ></view>
39 <block 39 <block
40 v-for="(page,page_index) in subData" 40 v-for="(page,page_index) in subData"
41 :key="page_index" 41 :key="page_index"
42 > 42 >
43 <view 43 <view
44 class="sub-menu-class" 44 class="sub-menu-class"
45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}" 45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
46 > 46 >
47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
48 <scroll-view 48 <scroll-view
49 class="sub-menu-list" 49 class="sub-menu-list"
50 :class="[activeMenuArr[page_index].length>1?'first':'alone']" 50 :class="[activeMenuArr[page_index].length>1?'first':'alone']"
51 :scroll-y="true" 51 :scroll-y="true"
52 :scroll-into-view="'first_id'+firstScrollInto" 52 :scroll-into-view="'first_id'+firstScrollInto"
53 > 53 >
54 <block 54 <block
55 v-for="(sub,index) in page.submenu" 55 v-for="(sub,index) in page.submenu"
56 :key="index" 56 :key="index"
57 > 57 >
58 <view 58 <view
59 class="sub-menu" 59 class="sub-menu"
60 :id="'first_id'+index" 60 :id="'first_id'+index"
61 :class="{'on':activeMenuArr[page_index][0]==index}" 61 :class="{'on':activeMenuArr[page_index][0]==index}"
62 @tap="selectHierarchyMenu(page_index,index,null,null)" 62 @tap="selectHierarchyMenu(page_index,index,null,null)"
63 > 63 >
64 <view class="menu-name"> 64 <view class="menu-name">
65 <text>{{sub.name}}</text> 65 <text>{{sub.name}}</text>
66 <text class="iconfont selected"></text> 66 <text class="iconfont selected"></text>
67 </view> 67 </view>
68 </view> 68 </view>
69 </block> 69 </block>
70 </scroll-view> 70 </scroll-view>
71 <block 71 <block
72 v-for="(sub,index) in page.submenu" 72 v-for="(sub,index) in page.submenu"
73 :key="index" 73 :key="index"
74 > 74 >
75 <scroll-view 75 <scroll-view
76 class="sub-menu-list not-first" 76 class="sub-menu-list not-first"
77 :scroll-y="true" 77 :scroll-y="true"
78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
79 :scroll-into-view="'second_id'+secondScrollInto" 79 :scroll-into-view="'second_id'+secondScrollInto"
80 > 80 >
81 <block 81 <block
82 v-for="(sub_second,second_index) in sub.submenu" 82 v-for="(sub_second,second_index) in sub.submenu"
83 :key="second_index" 83 :key="second_index"
84 > 84 >
85 <view 85 <view
86 class="sub-menu" 86 class="sub-menu"
87 :id="'second_id'+second_index" 87 :id="'second_id'+second_index"
88 :class="{'on':activeMenuArr[page_index][1]==second_index}" 88 :class="{'on':activeMenuArr[page_index][1]==second_index}"
89 > 89 >
90 <view 90 <view
91 class="menu-name" 91 class="menu-name"
92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)" 92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
93 > 93 >
94 <text>{{sub_second.name}}</text> 94 <text>{{sub_second.name}}</text>
95 <text class="iconfont selected"></text> 95 <text class="iconfont selected"></text>
96 </view> 96 </view>
97 <view 97 <view
98 class="more-sub-menu" 98 class="more-sub-menu"
99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0" 99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
100 > 100 >
101 <block 101 <block
102 v-for="(sub2,sub2_index) in sub_second.submenu" 102 v-for="(sub2,sub2_index) in sub_second.submenu"
103 :key="sub2_index" 103 :key="sub2_index"
104 > 104 >
105 <text 105 <text
106 v-if="sub_second.showAllSub || (sub2_index<8)" 106 v-if="sub_second.showAllSub || (sub2_index<8)"
107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 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)" 108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
109 >{{sub2.name}}</text> 109 >{{sub2.name}}</text>
110 <text 110 <text
111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" 111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
112 @tap="showMoreSub(second_index)" 112 @tap="showMoreSub(second_index)"
113 >更多<text class="iconfont triangle"></text></text> 113 >更多<text class="iconfont triangle"></text></text>
114 </block> 114 </block>
115 </view> 115 </view>
116 </view> 116 </view>
117 </block> 117 </block>
118 </scroll-view> 118 </scroll-view>
119 </block> 119 </block>
120 </block> 120 </block>
121 <block v-if="page.type=='filter' || page.type=='checkbox'"> 121 <block v-if="page.type=='filter' || page.type=='checkbox'">
122 <view class="filter"> 122 <view class="filter">
123 <scroll-view 123 <scroll-view
124 class="menu-box" 124 class="menu-box"
125 :scroll-y="true" 125 :scroll-y="true"
126 > 126 >
127 <view 127 <view
128 class="box" 128 class="box"
129 v-for="(box,box_index) in page.submenu" 129 v-for="(box,box_index) in page.submenu"
130 :key="box_index" 130 :key="box_index"
131 > 131 >
132 <view class="title">{{box.name}}</view> 132 <view class="title">{{box.name}}</view>
133 <view class="labels"> 133 <view class="labels">
134 <view 134 <view
135 v-for="(label,label_index) in box.submenu" 135 v-for="(label,label_index) in box.submenu"
136 :key="label_index" 136 :key="label_index"
137 @tap="selectFilterLabel(page_index, box_index, label_index)" 137 @tap="selectFilterLabel(page_index, box_index, label_index)"
138 :class="{'on': label.selected}" 138 :class="{'on': label.selected}"
139 >{{label.name}}</view> 139 >{{label.name}}</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </scroll-view> 142 </scroll-view>
143 <view class="btn-box"> 143 <view class="btn-box">
144 <view 144 <view
145 class="reset" 145 class="reset"
146 @tap="resetFilterData(page_index)" 146 @tap="resetFilterData(page_index)"
147 >重置</view> 147 >重置</view>
148 <view 148 <view
149 class="submit" 149 class="submit"
150 @tap="setFilterData(page_index)" 150 @tap="setFilterData(page_index)"
151 >确定</view> 151 >确定</view>
152 </view> 152 </view>
153 </view> 153 </view>
154 </block> 154 </block>
155 <block v-if="page.type=='radio'"> 155 <block v-if="page.type=='radio'">
156 <view class="filter"> 156 <view class="filter">
157 <scroll-view 157 <scroll-view
158 class="menu-box" 158 class="menu-box"
159 :scroll-y="true" 159 :scroll-y="true"
160 > 160 >
161 <view 161 <view
162 class="box" 162 class="box"
163 v-for="(box,box_index) in page.submenu" 163 v-for="(box,box_index) in page.submenu"
164 :key="box_index" 164 :key="box_index"
165 > 165 >
166 <view class="title">{{box.name}}</view> 166 <view class="title">{{box.name}}</view>
167 <view class="labels"> 167 <view class="labels">
168 <view 168 <view
169 v-for="(label,label_index) in box.submenu" 169 v-for="(label,label_index) in box.submenu"
170 :key="label_index" 170 :key="label_index"
171 @tap="selectRadioLabel(page_index,box_index,label_index)" 171 @tap="selectRadioLabel(page_index,box_index,label_index)"
172 :class="{'on':label.selected}" 172 :class="{'on':label.selected}"
173 >{{label.name}}</view> 173 >{{label.name}}</view>
174 </view> 174 </view>
175 </view> 175 </view>
176 </scroll-view> 176 </scroll-view>
177 <view class="btn-box"> 177 <view class="btn-box">
178 <view 178 <view
179 class="reset" 179 class="reset"
180 @tap="resetFilterData(page_index)" 180 @tap="resetFilterData(page_index)"
181 >重置</view> 181 >重置</view>
182 <view 182 <view
183 class="submit" 183 class="submit"
184 @tap="setFilterData(page_index)" 184 @tap="setFilterData(page_index)"
185 >确定</view> 185 >确定</view>
186 </view> 186 </view>
187 </view> 187 </view>
188 </block> 188 </block>
189 </view> 189 </view>
190 </block> 190 </block>
191 </view> 191 </view>
192 </template> 192 </template>
193 <script> 193 <script>
194 export default { 194 export default {
195 data () { 195 data () {
196 return { 196 return {
197 subData: [], // 菜单数据 197 subData: [], // 菜单数据
198 menu: [], // 顶部横条数据 198 menu: [], // 顶部横条数据
199 showPage: -1, // 菜单页面显示/隐藏动画控制 199 showPage: -1, // 菜单页面显示/隐藏动画控制
200 pageState: [], // 页面的状态 200 pageState: [], // 页面的状态
201 activeMenuArr: [], // UI状态 201 activeMenuArr: [], // UI状态
202 shadowActiveMenuArr: [], // 记录选中 202 shadowActiveMenuArr: [], // 记录选中
203 defaultActive: [], 203 defaultActive: [],
204 triangleDeg: [], // 小三角形的翻转动画控制 204 triangleDeg: [], // 小三角形的翻转动画控制
205 isShowMask: false, // 遮罩层显示/隐藏动画控制 205 isShowMask: false, // 遮罩层显示/隐藏动画控制
206 maskVisibility: false, // 遮罩层显示/隐藏状态 206 maskVisibility: false, // 遮罩层显示/隐藏状态
207 // 滚动区域定位 207 // 滚动区域定位
208 firstScrollInto: 0, 208 firstScrollInto: 0,
209 secondScrollInto: 0, 209 secondScrollInto: 0,
210 componentTop: 0, // 组件top 210 componentTop: 0, // 组件top
211 isReadNewSelect: false, 211 isReadNewSelect: false,
212 on: [1, 0, 0, 0, 0], 212 on: [1, 0, 0, 0, 0],
213 selectedData: {} 213 selectedData: {}
214 } 214 }
215 }, 215 },
216 props: { 216 props: {
217 filterData: { 217 filterData: {
218 value: Array, 218 value: Array,
219 default: [] 219 default: []
220 }, 220 },
221 defaultSelected: { 221 defaultSelected: {
222 value: Array, 222 value: Array,
223 default: [] 223 default: []
224 }, 224 },
225 updateMenuName: { 225 updateMenuName: {
226 value: Boolean, 226 value: Boolean,
227 default: true 227 default: true
228 }, 228 },
229 dataFormat: { 229 dataFormat: {
230 value: String, 230 value: String,
231 default: 'Array' 231 default: 'Array'
232 } 232 }
233 }, 233 },
234 watch: { 234 watch: {
235 filterData: { 235 filterData: {
236 handler () { 236 handler () {
237 this.initMenu() // filterData重新赋值初始化菜单 237 this.initMenu() // filterData重新赋值初始化菜单
238 }, 238 },
239 immediate: true 239 immediate: true
240 }, 240 },
241 defaultSelected (newVal) { 241 defaultSelected (newVal) {
242 if (newVal.length === 0) { 242 if (newVal.length === 0) {
243 return 243 return
244 } 244 }
245 this.defaultActive = JSON.parse(JSON.stringify(newVal)) 245 this.defaultActive = JSON.parse(JSON.stringify(newVal))
246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)) 246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)) 247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
248 } 248 }
249 }, 249 },
250 methods: { 250 methods: {
251 initMenu () { 251 initMenu () {
252 let tmpMenuActiveArr = [] 252 let tmpMenuActiveArr = []
253 const tmpMenu = [] 253 const tmpMenu = []
254 for (let i = 0; i < this.filterData.length; i++) { 254 for (let i = 0; i < this.filterData.length; i++) {
255 let tmpitem = this.filterData[i] 255 let tmpitem = this.filterData[i]
256 tmpMenu.push({ 256 tmpMenu.push({
257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name), 258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
259 type: tmpitem.type, 259 type: tmpitem.type,
260 isNoPull: tmpitem.isNoPull 260 isNoPull: tmpitem.isNoPull
261 }) 261 })
262 // 初始化选中项数组-ui状态 262 // 初始化选中项数组-ui状态
263 tmpMenuActiveArr.push(this.processActive(tmpitem)) 263 tmpMenuActiveArr.push(this.processActive(tmpitem))
264 // 初始化角度数组 264 // 初始化角度数组
265 this.triangleDeg.push(0) 265 this.triangleDeg.push(0)
266 // 初始化控制显示状态数组 266 // 初始化控制显示状态数组
267 this.pageState.push(false) 267 this.pageState.push(false)
268 // 递归处理子菜单数据 268 // 递归处理子菜单数据
269 tmpitem = this.processSubMenu(tmpitem) 269 tmpitem = this.processSubMenu(tmpitem)
270 this.filterData[i] = tmpitem 270 this.filterData[i] = tmpitem
271 if (tmpitem.type === 'filter') { 271 if (tmpitem.type === 'filter') {
272 for (let i = 0; i < tmpitem.length; i++) { 272 for (let i = 0; i < tmpitem.length; i++) {
273 this.selectedData[`${tmpitem.submenu[i].value}`] = [] 273 this.selectedData[`${tmpitem.submenu[i].value}`] = []
274 } 274 }
275 } 275 }
276 } 276 }
277 console.log('this.selectedData', this.selectedData) 277 console.log('this.selectedData', this.selectedData)
278 this.menu = tmpMenu 278 this.menu = tmpMenu
279 // 初始化选中项数组 279 // 初始化选中项数组
280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr 280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
281 this.defaultActive = [] 281 this.defaultActive = []
282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
284 // 加载菜单数据 284 // 加载菜单数据
285 this.subData = this.filterData 285 this.subData = this.filterData
286 }, 286 },
287 // 展开更多 287 // 展开更多
288 showMoreSub (index) { 288 showMoreSub (index) {
289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true 289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
290 this.$forceUpdate() 290 this.$forceUpdate()
291 }, 291 },
292 // 选中 292 // 选中
293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) { 293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
294 // 读取记录 294 // 读取记录
295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) { 295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))) 296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
297 } else { 297 } else {
298 this.activeMenuArr[page_index].splice(0, 1, level1_index); 298 this.activeMenuArr[page_index].splice(0, 1, level1_index);
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); 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);
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) 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)
301 } 301 }
302 // 写入结果 302 // 写入结果
303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
304 ) { 304 ) {
305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index] 305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
307 this.togglePage(this.showPage) 307 this.togglePage(this.showPage)
308 } 308 }
309 }, 309 },
310 // 写入结果，筛选 310 // 写入结果，筛选
311 setFilterData (page_index) { 311 setFilterData (page_index) {
312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
313 this.togglePage(this.showPage) 313 this.togglePage(this.showPage)
314 }, 314 },
315 // 重置结果和ui，筛选 315 // 重置结果和ui，筛选
316 resetFilterData (page_index) { 316 resetFilterData (page_index) {
317 const tmpArr = [] 317 const tmpArr = []
318 let level = this.shadowActiveMenuArr[page_index].length 318 let level = this.shadowActiveMenuArr[page_index].length
319 while (level > 0) { 319 while (level > 0) {
320 tmpArr.push([]) 320 tmpArr.push([])
321 const box = this.subData[page_index].submenu[level - 1].submenu 321 const box = this.subData[page_index].submenu[level - 1].submenu
322 for (let i = 0; i < box.length; i++) { 322 for (let i = 0; i < box.length; i++) {
323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false 323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false
324 } 324 }
325 level-- 325 level--
326 } 326 }
327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)) 327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
328 this.$forceUpdate() 328 this.$forceUpdate()
329 }, 329 },
330 // 选中筛选类label-UI状态 330 // 选中筛选类label-UI状态
331 selectFilterLabel (page_index, box_index, label_index) { 331 selectFilterLabel (page_index, box_index, label_index) {
332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index) 332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
333 const data = this.filterData[page_index].submenu 333 const data = this.filterData[page_index].submenu
334 const selected = this.selectedData[`${data[box_index].value}`] 334 const selected = this.selectedData[`${data[box_index].value}`]
335 if (findIndex > -1) { 335 if (findIndex > -1) {
336 this.activeMenuArr[page_index][box_index].splice(findIndex, 1) 336 this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
337 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false 337 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
338 for (let i = 0; i < selected.length; i++) { 338 for (let i = 0; i < selected.length; i++) {
339 if (selected[i] === data[box_index].submenu[label_index].value) { 339 if (selected[i] === data[box_index].submenu[label_index].value) {
340 selected.splice(i, 1) 340 selected.splice(i, 1)
341 this.selectedData[`${data[box_index].value}`] = selected 341 this.selectedData[`${data[box_index].value}`] = selected
342 } 342 }
343 } 343 }
344 } else { 344 } else {
345 this.activeMenuArr[page_index][box_index].push(label_index) 345 this.activeMenuArr[page_index][box_index].push(label_index)
346 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true 346 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
347 if (!selected) { 347 if (!selected) {
348 this.selectedData[`${data[box_index].value}`] = [] 348 this.selectedData[`${data[box_index].value}`] = []
349 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 349 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
350 } else { 350 } else {
351 console.log('---', data, this.filterData, this.selectedData) 351 console.log('---', data, this.filterData, this.selectedData)
352 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 352 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
353 } 353 }
354 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index]) 354 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
355 } 355 }
356 this.$forceUpdate() 356 this.$forceUpdate()
357 }, 357 },
358 // 选中单选类label-UI状态 358 // 选中单选类label-UI状态
359 selectRadioLabel (pageIndex, boxIndex, labelIndex) { 359 selectRadioLabel (pageIndex, boxIndex, labelIndex) {
360 const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0] 360 const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0]
361 if (activeIndex === labelIndex) { 361 if (activeIndex === labelIndex) {
362 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false 362 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
363 this.activeMenuArr[pageIndex][boxIndex][0] = null 363 this.activeMenuArr[pageIndex][boxIndex][0] = null
364 } else { 364 } else {
365 if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) { 365 if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) {
366 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false 366 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
367 } 367 }
368 368
369 this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true 369 this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true
370 this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex 370 this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex
371 } 371 }
372 this.$forceUpdate() 372 this.$forceUpdate()
373 }, 373 },
374 // 菜单开关 374 // 菜单开关
375 togglePage (index, isRequest = true) { 375 togglePage (index, isRequest = true) {
376 if (index === this.showPage) { 376 if (index === this.showPage) {
377 this.hidePageLayer(true, isRequest) 377 this.hidePageLayer(true, isRequest)
378 this.hideMask() 378 this.hideMask()
379 this.showPage = -1 379 this.showPage = -1
380 } else { 380 } else {
381 if (this.showPage > -1) { 381 if (this.showPage > -1) {
382 this.hidePageLayer(false, isRequest) 382 this.hidePageLayer(false, isRequest)
383 } 383 }
384 this.showPageLayer(index) 384 this.showPageLayer(index)
385 this.showMask() 385 this.showMask()
386 } 386 }
387 if (this.on[0] === 1) { 387 if (this.on[0] === 1) {
388 this.on[0] = 0 388 this.on[0] = 0
389 } 389 }
390 this.on[index] = 1 390 this.on[index] = 1
391 }, 391 },
392 showAll () { 392 showAll () {
393 this.on = [1, 0, 0, 0, 0] 393 this.on = [1, 0, 0, 0, 0]
394 // 输出 394 // 输出
395 this.$emit('search', { 395 this.$emit('search', {
396 index: {}, 396 index: {},
397 value: {}, 397 value: {},
398 on: this.on, 398 on: this.on,
399 selectedData: this.selectedData 399 selectedData: this.selectedData
400 }) 400 })
401 }, 401 },
402 // hide遮罩层 402 // hide遮罩层
403 hideMask () { 403 hideMask () {
404 this.isShowMask = false 404 this.isShowMask = false
405 setTimeout(() => { 405 setTimeout(() => {
406 this.maskVisibility = false 406 this.maskVisibility = false
407 }, 200) 407 }, 200)
408 }, 408 },
409 // show遮罩层 409 // show遮罩层
410 showMask () { 410 showMask () {
411 this.maskVisibility = true 411 this.maskVisibility = true
412 this.$nextTick(() => { 412 this.$nextTick(() => {
413 setTimeout(() => { 413 setTimeout(() => {
414 this.isShowMask = true 414 this.isShowMask = true
415 }, 0) 415 }, 0)
416 }) 416 })
417 }, 417 },
418 // hide菜单页 418 // hide菜单页
419 hidePageLayer (isAnimation,isRequset = true) { 419 hidePageLayer (isAnimation,isRequset = true) {
420 this.triangleDeg[this.showPage] = 0 420 this.triangleDeg[this.showPage] = 0
421 const tmpIndex = this.showPage 421 const tmpIndex = this.showPage
422 if (isAnimation) { 422 if (isAnimation) {
423 setTimeout(() => { 423 setTimeout(() => {
424 this.pageState.splice(tmpIndex, 1, false) 424 this.pageState.splice(tmpIndex, 1, false)
425 }, 200) 425 }, 200)
426 // debugger 426 // debugger
427 if(isRequset){
428 this.confirm()
429 }
427 if(isRequset){ 430 } else {
428 this.confirm() 431 this.pageState.splice(tmpIndex, 1, false)
429 } 432 }
430 } else { 433 this.firstScrollInto = null
431 this.pageState.splice(tmpIndex, 1, false) 434 this.secondScrollInto = null
432 } 435 },
433 this.firstScrollInto = null 436 confirm () {
434 this.secondScrollInto = null 437 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
435 }, 438 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
436 confirm () { 439
437 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 440 // 对结果做一下处理
438 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 441 index.forEach((item, i) => {
439 442 if (typeof (item[0]) === 'object') {
440 // 对结果做一下处理 443 // 针对筛选结果过一个排序
441 index.forEach((item, i) => { 444 item.forEach((s, j) => {
442 if (typeof (item[0]) === 'object') { 445 if (s != null) {
443 // 针对筛选结果过一个排序 446 s.sort((val1, val2) => {
444 item.forEach((s, j) => { 447 return val1 - val2
445 if (s != null) { 448 })
446 s.sort((val1, val2) => { 449 item[j] = s
447 return val1 - val2 450 s.forEach((v, k) => {
448 }) 451 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
449 item[j] = s 452 if (this.subData[i].type === 'radio' && value[i][j][k] == null) {
450 s.forEach((v, k) => { 453 value[i][j] = []
451 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value 454 index[i][j] = []
452 if (this.subData[i].type === 'radio' && value[i][j][k] == null) { 455 }
453 value[i][j] = [] 456 })
454 index[i][j] = [] 457 }
455 } 458 })
456 }) 459 } else {
457 } 460 let submenu = this.subData[i].submenu[item[0]]
458 }) 461 value[i][0] = submenu && submenu.value
459 } else { 462 if (value[i].length >= 2 && item[1] != null) {
460 let submenu = this.subData[i].submenu[item[0]] 463 if (submenu.submenu.length > 0) {
461 value[i][0] = submenu && submenu.value 464 submenu = submenu.submenu[item[1]]
462 if (value[i].length >= 2 && item[1] != null) { 465 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
463 if (submenu.submenu.length > 0) { 466 } else {
464 submenu = submenu.submenu[item[1]] 467 value[i][1] = null
465 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null 468 }
466 } else { 469 if (value[i].length >= 3 && item[2] != null) {
467 value[i][1] = null 470 if (submenu.submenu.length > 0) {
468 } 471 submenu = submenu.submenu[item[2]]
469 if (value[i].length >= 3 && item[2] != null) { 472 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
470 if (submenu.submenu.length > 0) { 473 } else {
471 submenu = submenu.submenu[item[2]] 474 value[i][2] = null
472 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null 475 }
473 } else { 476 }
474 value[i][2] = null 477 }
475 } 478 }
476 } 479 index[i] = item
477 } 480 })
478 } 481 // 输出
479 index[i] = item 482 this.$emit('search', {
480 }) 483 index: index,
481 // 输出 484 value: value,
482 this.$emit('search', { 485 on: this.on,
483 index: index, 486 selectedData: this.selectedData
484 value: value, 487 })
485 on: this.on, 488 },
486 selectedData: this.selectedData 489 // show菜单页
487 }) 490 showPageLayer (index) {
488 }, 491 this.processPage(index)
489 // show菜单页 492 this.pageState.splice(index, 1, true)
490 showPageLayer (index) { 493 this.$nextTick(() => {
491 this.processPage(index) 494 setTimeout(() => {
492 this.pageState.splice(index, 1, true) 495 this.showPage = index
493 this.$nextTick(() => { 496 }, 0)
494 setTimeout(() => { 497 })
495 this.showPage = index 498 this.triangleDeg[index] = 180
496 }, 0) 499 },
497 }) 500 reloadActiveMenuArr () {
498 this.triangleDeg[index] = 180 501 for (let i = 0; i < this.filterData.length; i++) {
499 }, 502 let tmpitem = this.filterData[i]
500 reloadActiveMenuArr () { 503 const tmpArr = this.processActive(tmpitem)
501 for (let i = 0; i < this.filterData.length; i++) { 504 tmpitem = this.processSubMenu(tmpitem)
502 let tmpitem = this.filterData[i] 505 if (this.activeMenuArr[i].length !== tmpArr.length) {
503 const tmpArr = this.processActive(tmpitem) 506 this.filterData[i] = tmpitem
504 tmpitem = this.processSubMenu(tmpitem) 507 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
505 if (this.activeMenuArr[i].length !== tmpArr.length) { 508 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
506 this.filterData[i] = tmpitem 509 }
507 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 510 }
508 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 511 this.subData = this.filterData
509 } 512 this.$forceUpdate()
510 } 513 },
511 this.subData = this.filterData 514 processPage (index) {
512 this.$forceUpdate() 515 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
513 }, 516 this.reloadActiveMenuArr()
514 processPage (index) { 517 // 重置UI控制数组
515 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 518 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
516 this.reloadActiveMenuArr() 519 if (this.menu[index].type === 'filter') {
517 // 重置UI控制数组 520 // 重载筛选页选中状态
518 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) 521 const level = this.shadowActiveMenuArr[index].length
519 if (this.menu[index].type === 'filter') { 522 for (let i = 0; i < level; i++) {
520 // 重载筛选页选中状态 523 const box = this.subData[index].submenu[i].submenu
521 const level = this.shadowActiveMenuArr[index].length 524 for (let j = 0; j < box.length; j++) {
522 for (let i = 0; i < level; i++) { 525 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
523 const box = this.subData[index].submenu[i].submenu 526 this.subData[index].submenu[i].submenu[j].selected = true
524 for (let j = 0; j < box.length; j++) { 527 } else {
525 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 528 this.subData[index].submenu[i].submenu[j].selected = false
526 this.subData[index].submenu[i].submenu[j].selected = true 529 }
527 } else { 530 }
528 this.subData[index].submenu[i].submenu[j].selected = false 531 }
529 } 532 } else if (this.menu[index].type === 'hierarchy') {
530 } 533 this.$nextTick(() => {
531 } 534 setTimeout(() => {
532 } else if (this.menu[index].type === 'hierarchy') { 535 // 滚动到选中项
533 this.$nextTick(() => { 536 this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
534 setTimeout(() => { 537 this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
535 // 滚动到选中项 538 }, 0)
536 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) 539 })
537 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) 540 } else if (this.menu[index].type === 'radio') {
538 }, 0) 541 // 重载筛选页选中状态
539 }) 542 const level = this.shadowActiveMenuArr[index].length
540 } else if (this.menu[index].type === 'radio') { 543 for (let i = 0; i < level; i++) {
541 // 重载筛选页选中状态 544 const box = this.subData[index].submenu[i].submenu
542 const level = this.shadowActiveMenuArr[index].length 545 for (let j = 0; j < box.length; j++) {
543 for (let i = 0; i < level; i++) { 546 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
544 const box = this.subData[index].submenu[i].submenu 547 this.subData[index].submenu[i].submenu[j].selected = true
545 for (let j = 0; j < box.length; j++) { 548 } else {
546 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 549 this.subData[index].submenu[i].submenu[j].selected = false
547 this.subData[index].submenu[i].submenu[j].selected = true 550 }
548 } else { 551 }
549 this.subData[index].submenu[i].submenu[j].selected = false 552 }
550 } 553 }
551 } 554 },
552 } 555 processActive (tmpitem) {
553 } 556 const tmpArr = []
554 }, 557 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
555 processActive (tmpitem) { 558 let level = this.getMaxFloor(tmpitem.submenu)
556 const tmpArr = [] 559 while (level > 0) {
557 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { 560 tmpArr.push(0)
558 let level = this.getMaxFloor(tmpitem.submenu) 561 level--
559 while (level > 0) { 562 }
560 tmpArr.push(0) 563 } else if (tmpitem.type === 'filter') {
561 level-- 564 let level = tmpitem.submenu.length
562 } 565 while (level > 0) {
563 } else if (tmpitem.type === 'filter') { 566 tmpArr.push([])
564 let level = tmpitem.submenu.length 567 level--
565 while (level > 0) { 568 }
566 tmpArr.push([]) 569 } else if (tmpitem.type === 'radio') {
567 level-- 570 let level = tmpitem.submenu.length
568 } 571 while (level > 0) {
569 } else if (tmpitem.type === 'radio') { 572 tmpArr.push([])
570 let level = tmpitem.submenu.length 573 level--
571 while (level > 0) { 574 }
572 tmpArr.push([]) 575 }
573 level-- 576 return tmpArr
574 } 577 },
575 } 578 processSubMenu (menu) {
576 return tmpArr 579 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
577 }, 580 for (let i = 0; i < menu.submenu.length; i++) {
578 processSubMenu (menu) { 581 menu.submenu[i] = this.processSubMenu(menu.submenu[i])
579 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 582 }
580 for (let i = 0; i < menu.submenu.length; i++) { 583 } else {
581 menu.submenu[i] = this.processSubMenu(menu.submenu[i]) 584 menu.submenu = []
582 } 585 }
583 } else { 586 return menu
584 menu.submenu = [] 587 },
585 } 588 // 计算菜单层级
586 return menu 589 getMaxFloor (treeData) {
587 }, 590 const floor = 0
588 // 计算菜单层级 591 let max = 0
589 getMaxFloor (treeData) { 592 function each (data, floor) {
590 const floor = 0 593 data.forEach(e => {
591 let max = 0 594 max = floor > max ? floor : max
592 function each (data, floor) { 595 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
593 data.forEach(e => { 596 each(e.submenu, floor + 1)
594 max = floor > max ? floor : max 597 }
595 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 598 })
596 each(e.submenu, floor + 1) 599 }
597 } 600 each(treeData, 1)
598 }) 601
599 } 602 return max
600 each(treeData, 1) 603 },
601 604 discard () {
602 return max 605
603 }, 606 }
604 discard () { 607 }
605 608 }
606 } 609 </script>
607 } 610 <style lang="scss">
608 } 611 .HMfilterDropdown {
609 </script> 612 flex-shrink: 0;
610 <style lang="scss"> 613 width: 100%;
611 .HMfilterDropdown { 614 height: 44px;
612 flex-shrink: 0; 615 position: fixed;
613 width: 100%; 616 z-index: 997;
614 height: 44px; 617 flex-wrap: nowrap;
615 position: fixed; 618 display: flex;
616 z-index: 997; 619 flex-direction: row;
617 flex-wrap: nowrap; 620 top: var(--window-top);
618 display: flex; 621 left: 0;
619 flex-direction: row; 622 view {
620 top: var(--window-top); 623 display: flex;
621 left: 0; 624 flex-wrap: nowrap;
622 view { 625 }
623 display: flex; 626 }
624 flex-wrap: nowrap; 627 .region {
625 } 628 flex: 1;
626 } 629 height: 44px;
627 .region { 630 }
628 flex: 1; 631 .nav {
629 height: 44px; 632 width: 100%;
630 } 633 height: 44px;
631 .nav { 634 z-index: 12;
632 width: 100%; 635 background-color: #ffffff;
633 height: 44px; 636 flex-direction: row;
634 z-index: 12; 637 .first-menu {
635 background-color: #ffffff; 638 width: 100%;
636 flex-direction: row; 639 font-size: 16px;
637 .first-menu { 640 color: #333333;
638 width: 100%; 641 flex-direction: row;
639 font-size: 16px; 642 align-items: center;
640 color: #333333; 643 justify-content: center;
641 flex-direction: row; 644 transition: color 0.2s linear;
642 align-items: center; 645
643 justify-content: center; 646 &.on {
644 transition: color 0.2s linear; 647 color: #ff6b4a;
645 648
646 &.on { 649 .iconfont {
647 color: #ff6b4a; 650 color: #ff6b4a;
648 651 }
649 .iconfont { 652 }
650 color: #ff6b4a; 653 .name {
651 } 654 height: 20px;
652 } 655 // font-size: 16px;
653 .name { 656 text-align: center;
654 height: 20px; 657 text-overflow: clip;
655 // font-size: 16px; 658 overflow: hidden;
656 text-align: center; 659 }
657 text-overflow: clip; 660 .iconfont {
658 overflow: hidden; 661 width: 13px;
659 } 662 height: 13px;
660 .iconfont { 663 line-height: 16px;
661 width: 13px; 664 align-items: center;
662 height: 13px; 665 justify-content: center;
663 line-height: 16px; 666 transition: transform 0.2s linear, color 0.2s linear;
664 align-items: center; 667 }
665 justify-content: center; 668 }
666 transition: transform 0.2s linear, color 0.2s linear; 669 }
667 } 670 .sub-menu-class {
668 } 671 width: 100%;
669 } 672 position: absolute;
670 .sub-menu-class { 673 left: 0;
671 width: 100%; 674 transform: translate3d(0, -100%, 0);
672 position: absolute; 675 max-height: 345px;
673 left: 0; 676 background-color: #ffffff;
674 transform: translate3d(0, -100%, 0); 677 z-index: 11;
675 max-height: 345px; 678 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
676 background-color: #ffffff; 679 overflow: hidden;
677 z-index: 11; 680 flex-direction: row;
678 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 681 transition: transform 0.15s linear;
679 overflow: hidden; 682 &.hide {
680 flex-direction: row; 683 display: none;
681 transition: transform 0.15s linear; 684 }
682 &.hide { 685
683 display: none; 686 &.show {
684 } 687 transform: translate3d(0, calc(44px + 1rpx), 0);
685 688 }
686 &.show { 689 }
687 transform: translate3d(0, calc(44px + 1rpx), 0); 690 .sub-menu-list {
688 } 691 width: 100%;
689 } 692 height: 345px;
690 .sub-menu-list { 693 flex-direction: column;
691 width: 100%; 694 .sub-menu {
692 height: 345px; 695 min-height: 44px;
693 flex-direction: column; 696 font-size: 13px;
694 .sub-menu { 697 flex-direction: column;
695 min-height: 44px; 698 padding-right: 15px;
696 font-size: 13px; 699 > .menu-name {
697 flex-direction: column; 700 height: 44px;
698 padding-right: 15px; 701 flex-direction: row;
699 > .menu-name { 702 align-items: center;
700 height: 44px; 703 justify-content: space-between;
701 flex-direction: row; 704 > .iconfont {
702 align-items: center; 705 display: none;
703 justify-content: space-between; 706 font-size: 18px;
704 > .iconfont { 707 color: #ff6b4a;
705 display: none; 708 }
706 font-size: 18px; 709 }
707 color: #ff6b4a; 710 }
708 } 711 &.first {
709 } 712 flex-shrink: 0;
710 } 713 width: 236rpx;
711 &.first { 714 background-color: #f0f0f0;
712 flex-shrink: 0; 715 .sub-menu {
713 width: 236rpx; 716 padding-left: 15px;
714 background-color: #f0f0f0; 717
715 .sub-menu { 718 &.on {
716 padding-left: 15px; 719 background-color: #fff;
717 720 }
718 &.on { 721 }
719 background-color: #fff; 722 }
720 } 723 &.alone {
721 } 724 max-height: 345px;
722 } 725 min-height: 60rpx;
723 &.alone { 726 height: auto;
724 max-height: 345px; 727 .sub-menu {
725 min-height: 60rpx; 728 min-height: calc(44px - 1rpx);
726 height: auto; 729 margin-left: 15px;
727 .sub-menu { 730 border-bottom: solid 1rpx #e5e5e5;
728 min-height: calc(44px - 1rpx); 731
729 margin-left: 15px; 732 &.on {
730 border-bottom: solid 1rpx #e5e5e5; 733 color: #ff6b4a;
731 734
732 &.on { 735 > .menu-name {
733 color: #ff6b4a; 736 > .iconfont {
734 737 display: block;
735 > .menu-name { 738 }
736 > .iconfont { 739 }
737 display: block; 740 }
738 } 741 }
739 } 742 }
740 } 743 &.not-first {
741 } 744 .sub-menu {
742 } 745 min-height: calc(44px - 1rpx);
743 &.not-first { 746 margin-left: 15px;
744 .sub-menu { 747 border-bottom: solid 1rpx #e5e5e5;
745 min-height: calc(44px - 1rpx); 748 > .menu-name {
746 margin-left: 15px; 749 height: calc(44px - 1rpx);
747 border-bottom: solid 1rpx #e5e5e5; 750 > .iconfont {
748 > .menu-name { 751 display: none;
749 height: calc(44px - 1rpx); 752 font-size: 18px;
750 > .iconfont { 753 color: #ff6b4a;
751 display: none; 754 }
752 font-size: 18px; 755 }
753 color: #ff6b4a; 756 &.on {
754 } 757 color: #ff6b4a;
755 } 758 > .menu-name {
756 &.on { 759 > .iconfont {
757 color: #ff6b4a; 760 display: block;
758 > .menu-name { 761 }
759 > .iconfont { 762 }
760 display: block; 763 }
761 } 764 .more-sub-menu {
762 } 765 flex-direction: row;
763 } 766 flex-wrap: wrap;
764 .more-sub-menu { 767 padding-bottom: 9px;
765 flex-direction: row; 768 > text {
766 flex-wrap: wrap; 769 height: 30px;
767 padding-bottom: 9px; 770 border-radius: 3px;
768 > text { 771 background-color: #f5f5f5;
769 height: 30px; 772 color: #9b9b9b;
770 border-radius: 3px; 773 margin-bottom: 6px;
771 background-color: #f5f5f5; 774 margin-right: 6px;
772 color: #9b9b9b; 775 text-align: center;
773 margin-bottom: 6px; 776 line-height: 30px;
774 margin-right: 6px; 777 border: solid #f5f5f5 1rpx;
775 text-align: center; 778 flex: 0 0 calc(33.33% - 6px);
776 line-height: 30px; 779 overflow: hidden;
777 border: solid #f5f5f5 1rpx; 780 font-size: 12px;
778 flex: 0 0 calc(33.33% - 6px); 781 &:nth-child(3n) {
779 overflow: hidden; 782 margin-right: 0;
780 font-size: 12px; 783 }
781 &:nth-child(3n) { 784 &.on {
782 margin-right: 0; 785 border-color: #f6c8ac;
783 } 786 color: #ff6b4a;
784 &.on { 787 }
785 border-color: #f6c8ac; 788 .iconfont {
786 color: #ff6b4a; 789 color: #9b9b9b;
787 } 790 }
788 .iconfont { 791 }
789 color: #9b9b9b; 792 }
790 } 793 }
791 } 794 }
792 } 795 }
793 } 796 .filter {
794 } 797 width: 100%;
795 } 798 height: 345px;
796 .filter { 799 display: flex;
797 width: 100%; 800 flex-direction: column;
798 height: 345px; 801 justify-content: space-between;
799 display: flex; 802 align-items: center;
800 flex-direction: column; 803 .menu-box {
801 justify-content: space-between; 804 width: 698rpx;
802 align-items: center; 805 height: calc(345px - 75px);
803 .menu-box { 806 flex-shrink: 1;
804 width: 698rpx; 807 .box {
805 height: calc(345px - 75px); 808 width: 100%;
806 flex-shrink: 1; 809 margin-top: 16px;
807 .box { 810 flex-direction: column;
808 width: 100%; 811 .title {
809 margin-top: 16px; 812 width: 100%;
810 flex-direction: column; 813 font-size: 13px;
811 .title { 814 color: #888;
812 width: 100%; 815 }
813 font-size: 13px; 816 .labels {
814 color: #888; 817 flex-direction: row;
815 } 818 flex-wrap: wrap;
819 justify-content: space-between;
816 .labels { 820 .on {
817 flex-direction: row; 821 border-color: #ff6b4a;
818 flex-wrap: wrap; 822 background-color: #ff6b4a;
819 justify-content: space-between; 823 color: #fff;
820 .on { 824 }
821 border-color: #ff6b4a; 825 > view {
822 background-color: #ff6b4a; 826 width: 220rpx;
823 color: #fff; 827 height: 30px;
824 } 828 border: solid 1rpx #adadad;
825 > view { 829 border-radius: 2px;
826 width: 220rpx; 830 margin-right: 2px;
827 height: 30px; 831 margin-top: 8px;
828 border: solid 1rpx #adadad; 832 padding: 0 10rpx;
829 border-radius: 2px; 833 box-sizing: border-box;
830 margin-right: 2px; 834 font-size: 12px;
831 margin-top: 8px; 835 flex-direction: row;
832 padding: 0 10rpx; 836 justify-content: center;
833 box-sizing: border-box; 837 align-items: center;
834 font-size: 12px; 838 overflow: hidden;
835 flex-direction: row; 839 white-space: nowrap;
836 justify-content: center; 840 text-overflow: ellipsis;
837 align-items: center; 841 &:nth-child(4n) {
838 overflow: hidden; 842 margin-right: 0;
839 white-space: nowrap; 843 }
840 text-overflow: ellipsis; 844 }
841 &:nth-child(4n) { 845 }
842 margin-right: 0; 846 }
843 } 847 }
844 } 848 .btn-box {
845 } 849 flex-shrink: 0;
846 } 850 width: 100%;
847 } 851 height: 75px;
848 .btn-box { 852 flex-direction: row !important;
849 flex-shrink: 0; 853 align-items: center;
850 width: 100%; 854 justify-content: space-between;
851 height: 75px; 855 > view {
852 flex-direction: row !important; 856 width: 320rpx;
853 align-items: center; 857 height: 40px;
854 justify-content: space-between; 858 border-radius: 40px;
855 > view { 859 border: solid 1rpx #ff6b4a;
856 width: 320rpx; 860 align-items: center;
857 height: 40px; 861 justify-content: center;
858 border-radius: 40px; 862 }
859 border: solid 1rpx #ff6b4a; 863 .reset {
860 align-items: center; 864 color: #ff6b4a;
861 justify-content: center; 865 }
862 } 866 .submit {
863 .reset { 867 color: #fff;
864 color: #ff6b4a; 868 background-color: #ff6b4a;
865 } 869 }
866 .submit { 870 }
867 color: #fff; 871 }
868 background-color: #ff6b4a; 872 .mask {
869 } 873 z-index: 10;
870 } 874 position: fixed;
871 } 875 top: 0;
872 .mask { 876 left: 0;
873 z-index: 10; 877 right: 0;
874 position: fixed; 878 bottom: 0;
875 top: 0; 879 background-color: rgba(0, 0, 0, 0);
876 left: 0; 880 transition: background-color 0.15s linear;
877 right: 0; 881 &.show {
878 bottom: 0; 882 background-color: rgba(0, 0, 0, 0.5);
879 background-color: rgba(0, 0, 0, 0); 883 }
880 transition: background-color 0.15s linear; 884 &.hide {
881 &.show { 885 display: none;
882 background-color: rgba(0, 0, 0, 0.5); 886 }
883 } 887 }
884 &.hide { 888 /* 字体图标 */
885 display: none; 889 @font-face {
886 } 890 font-family: "HM-FD-font";
887 } 891 src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=");
888 /* 字体图标 */ 892 }
889 @font-face { 893 .iconfont {
890 font-family: "HM-FD-font"; 894 font-family: "HM-FD-font" !important;
891 src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA="); 895 font-size: 13px;
892 } 896 font-style: normal;
893 .iconfont { 897 color: #757575;
894 font-family: "HM-FD-font" !important; 898 &.triangle {
895 font-size: 13px; 899 &:before {
896 font-style: normal; 900 content: "\e65a";
897 color: #757575; 901 }
898 &.triangle { 902 }
899 &:before { 903 &.selected {
900 content: "\e65a"; 904 &:before {
901 } 905 content: "\e607";
902 } 906 }
903 &.selected { 907 }
904 &:before { 908 }
905 content: "\e607"; 909 </style>
906 } 910
src/components/sl-filter/filter-view.vue
Diff comments   View file @280fcb8
File was created 1 <template>
2
3 <view>
4 <view style="padding: 0px 0px;">
5 <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
6 <view v-if="item.isSort">
7 <view class="filter-content-list">
8 <view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
9 :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
10 <text>{{detailItem.title}}</text>
11 </view>
12 </view>
13 </view>
14 <view v-else>
15 <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
16 <text>{{item.detailTitle}}</text>
17 </view>
18 <view class="filter-content-detail">
19 <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
20 @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
21 {{detailItem.title}}
22 </text>
23 </view>
24 <view class="filter-content-footer">
25 <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)">
26 <text>重置</text>
27 </view>
28 <view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
29 <text>确定</text>
30 </view>
31 </view>
32 </view>
33 </view>
34 </view>
35 </view>
36
37 </template>
38
39 <script>
40 export default {
41 data() {
42 return {
43 selectArr: [],
44 result: {},
45 menuIndex: 0,
46 selectDetailList: [],
47 independenceObj: {},
48 selectedKey: '',
49 cacheSelectedObj: {},
50 defaultSelectedTitleObj: {}
51 };
52 },
53 props: {
54 themeColor: {
55 type: String,
56 default () {
57 return '#D1372C'
58 }
59 },
60 menuList: {
61 type: Array,
62 default () {
63 return []
64 }
65 },
66 independence: {
67 type: Boolean,
68 default: false
69 }
70 },
71 computed: {
72 selectedTitleObj() {
73 let obj = {}
74 for (let i = 0; i < this.menuList.length; i++) {
75 let item = this.menuList[i];
76 obj[item.key] = item.title;
77 }
78 return obj;
79 },
80 defaultSelectedObj() { // 保存初始状态
81 return this.getSelectedObj()
82 },
83 selectedObj: {
84 get() {
85 return this.getSelectedObj()
86 },
87 set(newObj) {
88 return newObj;
89 }
90
91 }
92 },
93 methods: {
94 getSelectedObj() {
95 let obj = {}
96 for (let i = 0; i < this.menuList.length; i++) {
97 let item = this.menuList[i];
98 if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
99
100 if (item.isMutiple) {
101 obj[item.key] = [];
102 item.detailList[0].isSelected = false;
103 if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
104 item.defaultSelectedIndex = [item.defaultSelectedIndex];
105 }
106 for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
107 item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
108 obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
109 }
110
111 } else {
112 obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
113 this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
114 this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
115 item.detailList[0].isSelected = false;
116 item.detailList[item.defaultSelectedIndex].isSelected = true;
117 }
118 } else {
119 if (item.isMutiple) {
120 obj[item.key] = [];
121 } else {
122 obj[item.key] = '';
123 }
124 }
125 }
126 this.result = obj;
127 return obj;
128 },
129 // 重置所有选项，包括默认选项，并更新result
130 resetAllSelect(callback) {
131 let titles = [];
132 for (let i = 0; i < this.menuList.length; i++) {
133 this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
134 titles[this.menuList[i].key] = this.menuList[i].title;
135 }
136 let obj = {
137 'result': this.result,
138 'titles': titles,
139 'isReset': true
140 }
141 this.$emit("confirm", obj);
142 callback(this.result);
143 },
144 // 重置选项为设置的默认值，并更新result
145 resetSelectToDefault(callback) {
146 for (let i = 0; i < this.menuList.length; i++) {
147 this.selectDetailList = this.menuList[i].detailList;
148
149 if (this.menuList[i].defaultSelectedIndex) {
150 if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
151 for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
152 if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
153 this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
154 .menuList[i].key)
155 }
156 }
157 } else {
158 this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
159 i].key)
160 }
161
162 // 获取非默认项的下标
163 let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
164 // 把所有不是默认的为true的点为false
165 for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
166 if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
167 this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
168 .menuList[i].key)
169 }
170 }
171 }
172
173
174 }
175
176 this.selectedObj = this.defaultSelectedObj;
177 this.result = this.defaultSelectedObj;
178 let obj = {
179 'result': this.result,
180 'titles': this.defaultSelectedTitleObj,
181 'isReset': true
182 }
183 this.$emit("confirm", obj);
184 callback(this.result)
185 },
186 getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
187 let tempDefault = menuListItem.defaultSelectedIndex;
188 if (!Array.isArray(tempDefault)) {
189 tempDefault = [tempDefault];
190 }
191 // 获取所有项的下标 组成新的数组
192 let all = [];
193 for (let i = 0; i < menuListItem.detailList.length; i++) {
194 all.push(i)
195 }
196 // 将默认选中的数组与所有项的数组的不同值合并为一个新数组
197 var unDefaultSelectedIndex = tempDefault.filter(function(v) {
198 return !(all.indexOf(v) > -1)
199 }).concat(all.filter(function(v) {
200 return !(tempDefault.indexOf(v) > -1)
201 }));
202 return unDefaultSelectedIndex;
203 },
204 resetMenuList(val) {
205 this.menuList = val;
206 this.$emit('update:menuList', val)
207 },
208 menuTabClick(index) {
209 this.menuIndex = index;
210 this.selectDetailList = this.menuList[index].detailList;
211 this.selectedKey = this.menuList[index].key;
212 // 如果是独立菜单
213 if (this.independence && !this.menuList[index].isSort) {
214 if (JSON.stringify(this.independenceObj) == '{}') {
215 this.initIndependenceObj(index);
216 } else {
217 for (let key in this.independenceObj) {
218 if (key != this.selectedKey) {
219 this.initIndependenceObj(index);
220 this.resetSelected(this.menuList[index].detailList, this.selectedKey);
221 }
222 }
223 }
224
225 }
226 if (this.independence && this.menuList[index].isSort) {
227
228 this.independenceObj = {};
229
230
231 }
232 if (this.independence) {
233 let idx = this.menuList[index].defaultSelectedIndex;
234 if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
235 if (this.menuList[index].isMutiple) {
236 for (let i = 0; i < idx.length; i++) {
237 if (this.menuList[index].detailList[idx[i]].isSelected == false) {
238 this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
239 }
240
241 }
242 } else {
243 if (this.menuList[index].detailList[idx].isSelected == false) {
244
245 this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
246
247 }
248 }
249
250 }
251 }
252
253
254 // #ifdef H5
255 this.selectedObj = this.selectedObj;
256 this.$forceUpdate();
257 // #endif
258 },
259 initIndependenceObj(index) {
260 this.independenceObj = {};
261 if (this.menuList[index].isMutiple) {
262 this.independenceObj[this.selectedKey] = [];
263 } else {
264 this.independenceObj[this.selectedKey] = '';
265 }
266 },
267 itemTap(index, list, isMutiple, key) {
268 if (isMutiple == true) {
269 list[index].isSelected = !list[index].isSelected;
270 if (index == 0) {
271 this.resetSelected(list, key)
272 if (!this.independence) {
273 this.selectedTitleObj[key] = list[index].title;
274 }
275 } else {
276 list[0].isSelected = false
277 if (list[index].isSelected) {
278 if (this.independence) {
279 this.independenceObj[this.selectedKey].push(list[index].value);
280 } else {
281 this.selectedObj[key].push(list[index].value);
282 }
283 } else {
284 list[index].isSelected = false;
285 if (this.independence) {
286 var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
287 this.independenceObj[this.selectedKey].splice(idx, 1);
288 } else {
289 var idx = this.selectedObj[key].indexOf(list[index].value);
290 this.selectedObj[key].splice(idx, 1);
291 }
292
293 }
294 if (this.independence) {
295 this.result = this.independenceObj;
296 } else {
297 this.result = this.selectedObj;
298 }
299
300 }
301 } else {
302 if (index == 0) {
303 this.resetSelected(list, key)
304 if (!this.independence) {
305 this.selectedTitleObj[key] = list[index].title;
306 }
307 } else {
308 list[0].isSelected = false
309 if (this.independence) {
310 this.independenceObj[this.selectedKey] = list[index].value;
311 this.result = this.independenceObj;
312 } else {
313 this.selectedObj[key] = list[index].value;
314 this.result = this.selectedObj;
315 this.selectedTitleObj[key] = list[index].title;
316 }
317
318 for (let i = 0; i < list.length; i++) {
319 if (index == i) {
320 list[i].isSelected = true
321 } else {
322 list[i].isSelected = false
323 }
324 }
325 }
326 }
327 // #ifdef H5
328 this.$forceUpdate();
329 // #endif
330 },
331 resetSelected(list, key) {
332 if (typeof this.result[key] == 'object') {
333 this.result[key] = [];
334 this.selectedTitleObj[key] = list[0].title;
335 } else {
336 this.result[key] = '';
337 this.selectedTitleObj[key] = list[0].title;
338 }
339 for (let i = 0; i < list.length; i++) {
340 if (i == 0) {
341 list[i].isSelected = true;
342 } else {
343 list[i].isSelected = false;
344 }
345 }
346 // #ifdef H5
347 this.$forceUpdate();
348 // #endif
349 },
350 sortTap(index, list, key) {
351 if (this.independence) {
352 this.independenceObj[this.selectedKey] = list[index].value;
353 this.result = this.independenceObj;
354 } else {
355 this.selectedObj[key] = list[index].value;
356 this.result = this.selectedObj;
357 this.selectedTitleObj[key] = list[index].title;
358 }
359
360 for (let i = 0; i < list.length; i++) {
361 if (index == i) {
362 list[i].isSelected = true;
363 } else {
364 list[i].isSelected = false;
365 }
366 }
367 let obj = {
368 'result': this.result,
369 'titles': this.selectedTitleObj,
370 'isReset': false
371 }
372 this.$emit("confirm", obj);
373 },
374 sureClick() {
375 let obj = {
376 'result': this.result,
377 'titles': this.selectedTitleObj,
378 'isReset': false
379 }
380 this.$emit("confirm", obj);
381 },
382 resetClick(list, key) {
383 this.resetSelected(list, key)
384 }
385 }
386 }
387 </script>
388
389 <style>
390 .filter-content {
391 background-color: #F6F7F8;
392 }
393
394 .filter-content-title {
395 border-bottom: #EEEEEE 1px solid;
396 padding: 10px 15px;
397 font-size: 13px;
398 color: #999999;
399 }
400
401 .filter-content-detail {
402 padding: 5px 15px;
403 }
404
405 .filter-content-detail-item-active {
406 background-color: #D1372C;
407 color: #FFFFFF;
408 padding: 5px 15px;
409 border-radius: 20px;
410 margin-right: 10px;
411 margin-top: 10px;
412 display: inline-block;
413 font-size: 14px;
414 }
415
416 .filter-content-detail-item-default {
417 background-color: #FFFFFF;
418 color: #666666;
419 padding: 5px 15px;
420 border-radius: 20px;
421 margin-right: 10px;
422 margin-top: 10px;
423 display: inline-block;
424 font-size: 14px;
425 }
426
427 .filter-content-footer {
428 display: flex;
429 justify-content: space-between;
430 width: 100%;
431 height: 45px;
432 margin-top: 10px;
433 }
434
435 .filter-content-footer-item {
436 width: 50%;
437 display: flex;
438 justify-content: center;
439 align-items: center;
440 font-size: 16px;
441 }
442
443 .filter-content-list {
444
445 padding: 5px 15px;
446 }
447
448 .filter-content-list-item-default {
449 color: #666666;
450 width: 100%;
451 padding: 10px 0px;
452 }
453
454 .filter-content-list-item-default text {
455 width: 90%;
456 font-size: 14px;
457 display: inline-block;
458 }
459
460 .filter-content-list-item-active {
461 color: #D1372C;
462 width: 100%;
463 padding: 10px 0px;
464 }
465
466 .filter-content-list-item-active text {
467 font-size: 14px;
468 width: 90%;
469 display: inline-block;
470 }
471
472 .filter-content-list-item-active:after {
473 content: '✓';
474 }
475 </style>
1 <template> 476
src/components/sl-filter/iconfont/iconfont.css
Diff comments   View file @280fcb8
File was created 1 @font-face {
2 font-family: 'sl-font';
3 src: url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8kEgOAAABfAAAAFZjbWFwZO3RAgAAAeAAAAGGZ2x5Zh0ZI/EAAANwAAAAyGhlYWQVZkUXAAAA4AAAADZoaGVhB94DhAAAALwAAAAkaG10eAwAAAAAAAHUAAAADGxvY2EAMgBkAAADaAAAAAhtYXhwAREAKAAAARgAAAAgbmFtZT5U/n0AAAQ4AAACbXBvc3TohGjqAAAGqAAAADMAAQAAA4D/gABcBAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAMAAQAAAAEAANxW6kVfDzz1AAsEAAAAAADZJADbAAAAANkkANsAAAAABAACZAAAAAgAAgAAAAAAAAABAAAAAwAcAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5hrmHAOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAABQAAAAMAAAAsAAAABAAAAV4AAQAAAAAAWAADAAEAAAAsAAMACgAAAV4ABAAsAAAABgAEAAEAAuYa5hz//wAA5hrmHP//AAAAAAABAAYABgAAAAEAAgAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAKAAAAAAAAAACAADmGgAA5hoAAAABAADmHAAA5hwAAAACAAAAAAAAADIAZAAEAAAAAAOlAmQAEwAWABkAGgAAEwEWMjcBNjIWFAcBBiInASY0NjIBMDEVMDEnmQFgAgoDAV8LHRUK/n8LHAv+fwoVHQFoAQJZ/qEDAwFfCxYcC/6ACwsBgAsdFf6bAgQAAAAABAAAAAADpAJkABMAFgAZABsAACUBJiIHAQYiJjQ3ATYyFwEWFAYiATAxNTAxFzEDZ/6hAwoD/qELHRUKAYELHAsBgQoVHf6YAacBXwMD/qELFhwLAYEKCv5/CxwWAWUCBAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAEZG93bgJ1cAAAAA==') format('truetype');
4 }
5
6 .sl-font {
7 font-family: "sl-font" !important;
8 font-size: 16px;
9 font-style: normal;
10 -webkit-font-smoothing: antialiased;
11 -moz-osx-font-smoothing: grayscale;
12 }
13
14 .sl-down:before {
15 content: "\e61a";
16 }
17
18 .sl-up:before {
19 content: "\e61c";
20 }
1 @font-face { 21
src/components/sl-filter/popup-layer.vue
Diff comments   View file @280fcb8
File was created 1 <template>
2 <scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
3 <view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
4 <slot></slot>
5 </view>
6 </scroll-view>
7 </template>
8
9 <script>
10 export default {
11 name: 'popup-layer',
12 props: {
13 direction: {
14 type: String,
15 default: 'top', // 方向 top，bottom，left，right
16 },
17 autoClose: {
18 type: Boolean,
19 default: true,
20 },
21 isTransNav: {
22 type: Boolean,
23 default: false
24 },
25 navHeight: {
26 type: Number,
27 default: 0
28 }
29 },
30 data() {
31 return {
32 ifshow: false, // 是否展示,
33 translateValue: -100, // 位移距离
34 timer: null,
35 iftoggle: false,
36 };
37 },
38 computed: {
39 _translate() {
40 if (this.isTransNav) {
41 const transformObj = {
42 'top': `transform:translateY(${-this.translateValue}%)`,
43 'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
44 'left': `transform:translateX(${-this.translateValue}%)`,
45 'right': `transform:translateX(${this.translateValue}%)`
46 };
47 return transformObj[this.direction]
48 } else {
49 const transformObj = {
50 'top': `transform:translateY(${-this.translateValue}%)`,
51 'bottom': `transform:translateY(${this.translateValue}%)`,
52 'left': `transform:translateX(${-this.translateValue}%)`,
53 'right': `transform:translateX(${this.translateValue}%)`
54 };
55 return transformObj[this.direction]
56 }
57
58 },
59 _location() {
60 const positionValue = {
61 'top': 'bottom:0px;width:100%;',
62 'bottom': 'top:0px;width:100%;',
63 'left': 'right:0px;height:100%;',
64 'right': 'left:0px;height:100%;',
65 };
66 return positionValue[this.direction] + this._translate;
67 }
68 },
69 methods: {
70 show() {
71 let _this = this;
72 this.ifshow = true;
73 let _open = setTimeout(() => {
74 this.translateValue = 0;
75 _open = null;
76 }, 100)
77 let _toggle = setTimeout(() => {
78 this.iftoggle = true;
79 _toggle = null;
80 }, 300);
81 },
82 close() {
83 if (this.timer !== null || !this.iftoggle) {
84 return;
85 }
86 this.translateValue = -100 - this.navHeight;
87
88 this.timer = setTimeout(() => {
89 this.ifshow = false;
90 this.timer = null;
91 this.iftoggle = false;
92 }, 300);
93 this.$emit("close")
94 },
95 ableClose() {
96 if (this.autoClose) {
97 this.close();
98 }
99 },
100 stopEvent(event) {},
101 }
102 }
103 </script>
104
105 <style>
106 .popup-layer {
107 position: absolute;
108 z-index: 999999;
109 background: rgba(0, 0, 0, .3);
110 height: calc(100% - 50px);
111 width: 100%;
112 left: 0px;
113 overflow: hidden;
114 }
115
116 .popup-content {
117 position: absolute;
118 z-index: 1000000;
119 background: #FFFFFF;
120 transition: all .3s ease;
121 }
122 </style>
1 <template> 123
src/components/sl-filter/sl-filter.vue
Diff comments   View file @280fcb8
File was created 1 <template>
2 <view class="content">
3 <view :style="{height: tabHeight + 1 +'px'}">
4 <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
5 <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
6 <text :style="{color:color}">{{item.title}}</text>
7 <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
8 </view>
9 </view>
10 </view>
11 <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
12 :tabHeight="tabHeight">
13 <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
14 ref="slFilterView" @confirm="filterResult"></sl-filter-view>
15 </popup-layer>
16 </view>
17
18 </template>
19
20 <script>
21 import popupLayer from '@/components/sl-filter/popup-layer.vue';
22 import slFilterView from '@/components/sl-filter/filter-view.vue';
23 export default {
24 components: {
25 popupLayer,
26 slFilterView
27 },
28 props: {
29 menuList: {
30 type: Array,
31 default () {
32 return []
33 }
34 },
35 themeColor: {
36 type: String,
37 default () {
38 return '#000000'
39 }
40 },
41 color: {
42 type: String,
43 default () {
44 return '#666666'
45 }
46 },
47 independence: {
48 type: Boolean,
49 default: false
50 },
51 isTransNav: {
52 type: Boolean,
53 default: false
54 },
55 navHeight: {
56 type: Number,
57 default: 0
58 },
59 topFixed: {
60 type: Boolean,
61 default: false
62 }
63 },
64
65 computed: {
66 itemWidth() {
67 return 'calc(100%/2)'
68 },
69 menuListTemp: {
70 get() {
71 return this.getMenuListTemp();
72 },
73 set(newObj) {
74 return newObj;
75 }
76 }
77 },
78 // #ifndef H5
79 onReady: function() {
80 let arr = [];
81 let titleArr = [];
82 let r = {};
83 for (let i = 0; i < this.menuList.length; i++) {
84 arr.push({
85 'isActive': false
86 });
87 // titleArr.push({
88 // 'title': this.menuList[i].title,
89 // 'key': this.menuList[i].key
90 // })
91
92 r[this.menuList[i].key] = this.menuList[i].title;
93
94 if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
95 titleArr.push({
96 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
97 'key': this.menuList[i].key
98 })
99 } else {
100 titleArr.push({
101 'title': this.menuList[i].title,
102 'key': this.menuList[i].key
103 })
104 }
105
106 }
107 this.statusList = arr;
108 this.titleList = titleArr;
109 this.tempTitleObj = r;
110 },
111 // #endif
112
113 // #ifdef H5
114 created: function() {
115 let arr = [];
116 let titleArr = [];
117 let r = {};
118 for (let i = 0; i < this.menuList.length; i++) {
119 arr.push({
120 'isActive': false
121 });
122 // titleArr.push({
123 // 'title': this.menuList[i].title,
124 // 'key': this.menuList[i].key
125 // });
126 r[this.menuList[i].key] = this.menuList[i].title;
127
128 if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
129 titleArr.push({
130 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
131 'key': this.menuList[i].key
132 })
133 } else {
134 titleArr.push({
135 'title': this.menuList[i].title,
136 'key': this.menuList[i].key
137 })
138 }
139
140 }
141 this.statusList = arr;
142 this.titleList = titleArr;
143 this.tempTitleObj = r;
144 },
145 // #endif
146 data() {
147 return {
148 down: 'sl-down',
149 up: 'sl-up',
150 tabHeight: 50,
151 statusList: [],
152 selectedIndex: '',
153 titleList: [],
154 tempTitleObj: {}
155 };
156 },
157 methods: {
158 getMenuListTemp() {
159 let arr = this.menuList;
160 for (let i = 0; i < arr.length; i++) {
161 let item = arr[i];
162 for (let j = 0; j < item.detailList.length; j++) {
163 let d_item = item.detailList[j];
164 if (j == 0) {
165 d_item.isSelected = true
166 } else {
167 d_item.isSelected = false
168 }
169 }
170 }
171 return arr;
172 },
173 // 重置所有选项，包括默认选项，并更新result
174 resetAllSelect(callback) {
175 this.$refs.slFilterView.resetAllSelect(function(e){
176 callback(e);
177 });
178 },
179 // 重置选项为设置的默认值，并更新result
180 resetSelectToDefault(callback) {
181 this.$refs.slFilterView.resetSelectToDefault(function(e){
182 callback(e);
183 });
184 },
185 resetMenuList(val) {
186 this.menuList = val;
187 this.$emit('update:menuList', val)
188 this.$forceUpdate();
189 this.$refs.slFilterView.resetMenuList(val)
190 },
191 showMenuClick(index) {
192 this.selectedIndex = index;
193 if (this.statusList[index].isActive == true) {
194 this.$refs.popupRef.close();
195 this.statusList[index].isActive = false
196 } else {
197 this.menuTabClick(index);
198 this.$refs.popupRef.show()
199 }
200 },
201 menuTabClick(index) {
202 this.$refs.slFilterView.menuTabClick(index);
203 for (let i = 0; i < this.statusList.length; i++) {
204 if (index == i) {
205 this.statusList[i].isActive = true;
206 } else {
207 this.statusList[i].isActive = false;
208 }
209 }
210 },
211 filterResult(obj) {
212 let val = obj.result;
213 let titlesObj = obj.titles;
214 // 处理选项映射到菜单title
215 if (this.independence) {
216 if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
217 let tempTitle = '';
218 for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
219 let item = this.menuList[this.selectedIndex].detailList[i];
220 if (item.value == val[this.menuList[this.selectedIndex].key]) {
221 tempTitle = item.title;
222 }
223 }
224 if (this.menuList[this.selectedIndex].reflexTitle) {
225 this.titleList[this.selectedIndex].title = tempTitle;
226 }
227 }
228 } else {
229 for (let key in titlesObj) {
230 if (!Array.isArray(titlesObj[key])) {
231 this.tempTitleObj[key] = titlesObj[key];
232 }
233
234 }
235 for (let key in this.tempTitleObj) {
236 for (let i = 0; i < this.titleList.length; i++) {
237 if (this.titleList[i].key == key) {
238 this.titleList[i].title = this.tempTitleObj[key];
239 }
240 }
241 }
242 }
243
244 this.$refs.popupRef.close()
245 if (obj.isReset) {
246
247 } else{
248 this.$emit("result", val)
249 }
250
251
252 },
253 close() {
254 for (let i = 0; i < this.statusList.length; i++) {
255 this.statusList[i].isActive = false;
256 }
257 }
258 }
259 }
260 </script>
261
262 <style lang="scss">
263 @import 'iconfont/iconfont.css';
264 // .content{
265 // flex-shrink: 0;
266 // width: 100%;
267 // height: 44px;
268 // position: fixed;
269 // z-index: 997;
270 // flex-wrap: nowrap;
271 // display: flex;
272 // flex-direction: row;
273 // // top: var(--window-top);
274 // left: 0;
275 // view {
276 // display: flex;
277 // flex-wrap: nowrap;
278 // }
279 // }
280 .select-tab {
281 border-bottom: #F7F7F7 1px solid;
282 background-color: #FFFFFF;
283 display: flex;
284 width: 100%;
285 }
286
287 .select-tab-fixed-top {
288 border-bottom: #F7F7F7 1px solid;
289 background-color: #FFFFFF;
290 display: flex;
291 width: 100%;
292 position: fixed;
293 /* #ifdef H5 */
294 top: 44px;
295 /* #endif */
296 /* #ifndef H5 */
297 top: 0;
298 /* #endif */
299 }
300
301 .arrows {
302 margin-left: 5px;
303 }
304
305 .select-tab .select-tab-item,
306 .select-tab-fixed-top .select-tab-item {
307 display: flex;
308 justify-content: center;
309 align-items: center;
310 }
311
312 .select-tab .select-tab-item text,
313 .select-tab-fixed-top .select-tab-item text {
314 color: #666666;
315 font-size: 14px;
316 }
317 </style>
1 <template> 318
src/pages/index/index.vue
Diff comments   View file @280fcb8
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="content skeleton" v-show="showContent"> 3 <view class="content skeleton" v-show="showContent">
4 <view class="header"> 4 <view class="header">
5 <!-- 搜索--> 5 <!-- 搜索-->
6 <view class="searchBar skeleton-rect"> 6 <view class="searchBar skeleton-rect">
7 <icon 7 <icon
8 class="searchIcon" 8 class="searchIcon"
9 type="search" 9 type="search"
10 size="14" 10 size="14"
11 ></icon> 11 ></icon>
12 <input 12 <input
13 v-model="searchText" 13 v-model="searchText"
14 class="searchIpt" 14 class="searchIpt"
15 placeholder="老花镜" 15 placeholder="老花镜"
16 confirm-type="search" 16 confirm-type="search"
17 @blur="searchKey" 17 @blur="searchKey"
18 /> 18 />
19 </view> 19 </view>
20 20
21 <!-- 筛选栏--> 21 <!-- 筛选栏-->
22 <!-- <view class="screenBar"> 22 <!-- <view class="screenBar">
23 <view 23 <view
24 v-for="item in screenItems" 24 v-for="item in screenItems"
25 :key="item.current" 25 :key="item.current"
26 @click="onClickItem(item.current)" 26 @click="onClickItem(item.current)"
27 > 27 >
28 <view 28 <view
29 class="screenItem" 29 class="screenItem"
30 v-bind:class="{ active: current === item.current }" 30 v-bind:class="{ active: current === item.current }"
31 v-if="item.current === 2" 31 v-if="item.current === 2"
32 @click="dropDown" 32 @click="dropDown"
33 > 33 >
34 {{ item.text }} 34 {{ item.text }}
35 <icon 35 <icon
36 type="info" 36 type="info"
37 size="14" 37 size="14"
38 ></icon> 38 ></icon>
39 </view> 39 </view>
40 <view 40 <view
41 class="screenItem" 41 class="screenItem"
42 v-bind:class="{ active: current === item.current }" 42 v-bind:class="{ active: current === item.current }"
43 v-if="item.current === 4" 43 v-if="item.current === 4"
44 @click="showDrawer('showRight')" 44 @click="showDrawer('showRight')"
45 > 45 >
46 {{ item.text }} 46 {{ item.text }}
47 <icon 47 <icon
48 type="info" 48 type="info"
49 size="14" 49 size="14"
50 ></icon> 50 ></icon>
51 </view> 51 </view>
52 <view v-if="item.current !== 2&&item.current!==4"> 52 <view v-if="item.current !== 2&&item.current!==4">
53 <view 53 <view
54 class="screenItem" 54 class="screenItem"
55 v-bind:class="{ active: current === item.current }" 55 v-bind:class="{ active: current === item.current }"
56 >{{ item.text }}</view> 56 >{{ item.text }}</view>
57 </view> 57 </view>
58 </view> 58 </view>
59 </view> --> 59 </view> -->
60 </view> 60 </view>
61 <Uni-drawer 61 <Uni-drawer
62 ref="showRight" 62 ref="showRight"
63 mask="true" 63 mask="true"
64 maskClick="true" 64 maskClick="true"
65 mode="right" 65 mode="right"
66 :width="320" 66 :width="320"
67 @change="change($event,'showRight')" 67 @change="change($event,'showRight')"
68 > 68 >
69 <view class="close"> 69 <view class="close">
70 <view @click="closeDrawer('showRight')"> 70 <view @click="closeDrawer('showRight')">
71 <text class="word-btn-white">关闭</text> 71 <text class="word-btn-white">关闭</text>
72 </view> 72 </view>
73 </view> 73 </view>
74 </Uni-drawer> 74 </Uni-drawer>
75 75
76 <!-- 筛选菜单--> 76 <!-- 筛选菜单-->
77 <view class="content-wrap skeleton-rect"> 77 <view class="content-wrap skeleton-rect">
78 <view> 78 <view>
79 <HMfilterDropdown 79 <HMfilterDropdown
80 :filterData="categoryList" 80 :filterData="categoryList"
81 :defaultSelected="filterDropdownValue" 81 :defaultSelected="filterDropdownValue"
82 :updateMenuName="true" 82 :updateMenuName="true"
83 @search="search" 83 @search="search"
84 @getList="getList" 84 @getList="getList"
85 data-format="Object" 85 data-format="Object"
86 ></HMfilterDropdown> 86 ></HMfilterDropdown>
87 <!-- 商品列表 --> 87 <!-- 商品列表 -->
88 <!-- <scroll-view 88 <!-- <scroll-view
89 enable-flex 89 enable-flex
90 @scrolltolower="handleScrolltolower" 90 @scrolltolower="handleScrolltolower"
91 scroll-y 91 scroll-y
92 style="height: 1000px;margin-bottom: 20px;" 92 style="height: 1000px;margin-bottom: 20px;"
93 > --> 93 > -->
94 <view class="goods-list"> 94 <view class="goods-list">
95 <view class="product-list"> 95 <view class="product-list">
96 <view 96 <view
97 class="product skeleton-rect" 97 class="product skeleton-rect"
98 v-for="(goods) in goodsList" 98 v-for="(goods) in goodsList"
99 :key="goods.id" 99 :key="goods.id"
100 > 100 >
101 <Card 101 <Card
102 :goods="goods" 102 :goods="goods"
103 :scrollTop="scrollTop" 103 :scrollTop="scrollTop"
104 :viewHeight="viewHeight" 104 :viewHeight="viewHeight"
105 ></Card> 105 ></Card>
106 </view> 106 </view>
107 </view> 107 </view>
108 <view class="loading-text"> 108 <view class="loading-text">
109 <text v-if="isLoading==true">{{loadingText}}</text> 109 <text v-if="isLoading==true">{{loadingText}}</text>
110 <text v-else>{{loadedText}}</text> 110 <text v-else>{{loadedText}}</text>
111 </view> 111 </view>
112 </view> 112 </view>
113 <!-- </scroll-view> --> 113 <!-- </scroll-view> -->
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <!--引用组件--> 117 <!--引用组件-->
118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton> 118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
119 </view> 119 </view>
120 </template> 120 </template>
121 121
122 <script> 122 <script>
123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
124 import Card from "@/components/CommodityCard/CommodityCard.vue"; 124 import Card from "@/components/CommodityCard/CommodityCard.vue";
125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue"; 126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
127 import store from "@/store"; 127 import store from "@/store";
128 128
129 129
130 export default { 130 export default {
131 components: { 131 components: {
132 UniDrawer: UniDrawer, 132 UniDrawer: UniDrawer,
133 HMfilterDropdown: HMfilterDropdown, 133 HMfilterDropdown: HMfilterDropdown,
134 Card: Card, 134 Card: Card,
135 skeleton: skeleton 135 skeleton: skeleton
136 }, 136 },
137 data() { 137 data() {
138 return { 138 return {
139 indexArr: "", 139 indexArr: "",
140 valueArr: "", 140 valueArr: "",
141 isLoading: true, //初始化加载状态 141 isLoading: true, //初始化加载状态
142 loadingText: "data loading...", 142 loadingText: "data loading...",
143 loadedText: "~~暂无更多数据~~", 143 loadedText: "~~暂无更多数据~~",
144 filterDropdownValue: [], 144 filterDropdownValue: [],
145 filterData: [], 145 filterData: [],
146 searchText: "", 146 searchText: "",
147 scrollTop: 0, 147 scrollTop: 0,
148 showContent: true, 148 showContent: true,
149 viewHeight: uni.getSystemInfoSync().windowHeight, 149 viewHeight: uni.getSystemInfoSync().windowHeight,
150 showSkeleton: false //骨架屏显示隐藏 150 showSkeleton: false //骨架屏显示隐藏
151 }; 151 };
152 }, 152 },
153 onPageScroll({ scrollTop }) { 153 onPageScroll({ scrollTop }) {
154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
155 this.scrollTop = scrollTop; 155 this.scrollTop = scrollTop;
156 }, 156 },
157 computed: { 157 computed: {
158 goodsList() { 158 goodsList() {
159 // 也可以从 getters 获取 159 // 也可以从 getters 获取
160 // console.log('index-list=====>',this.$store.state.index.list) 160 // console.log('index-list=====>',this.$store.state.index.list)
161 let list = this.$store.state.index.list; 161 let list = this.$store.state.index.list;
162 if(list.length == 0){
163 this.isLoading = false;
164 }
165 this.scrollTop = 0.1;
166 return list
162 if(list.length == 0){ 167 },
163 this.isLoading = false; 168 categoryList() {
164 } 169 return this.$store.state.index.categoryList;
165 this.scrollTop = 0.1; 170 }
166 return list 171 },
167 }, 172 filters: {
168 categoryList() { 173 outData(value) {
169 return this.$store.state.index.categoryList; 174 return JSON.stringify(value);
170 } 175 }
171 }, 176 },
172 filters: { 177 /**
173 outData(value) { 178 * 页面载入完成后调用子组件的方法生成预加载效果
174 return JSON.stringify(value); 179 */
175 } 180 onReady:function(){
176 }, 181 this.getInitData()
177 /** 182 },
178 * 页面载入完成后调用子组件的方法生成预加载效果 183 methods: {
179 */ 184 async getInitData (){
180 onReady:function(){ 185 this.showSkeleton = true;
181 this.getInitData() 186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
182 }, 187 this.showSkeleton = false;
183 methods: { 188 this.showContent = true
184 async getInitData (){ 189 },
185 this.showSkeleton = true; 190 showDrawer(e) {
186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")]) 191 this.$refs[e].open();
187 this.showSkeleton = false; 192 },
188 this.showContent = true 193 getList() {
189 }, 194 store.dispatch("index/list");
190 showDrawer(e) { 195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
191 this.$refs[e].open(); 196 //把data里的isLoading 改为false就可以了
192 }, 197 },
193 getList() { 198 // search(params) {
194 store.dispatch("index/list"); 199 // this.$store.index.
195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。 200 // },
196 //把data里的isLoading 改为false就可以了 201 closeDrawer(e) {
197 }, 202 this.$refs[e].close();
198 // search(params) { 203 },
199 // this.$store.index. 204 change(e, type) {
200 // }, 205 this[type] = e;
201 closeDrawer(e) { 206 },
202 this.$refs[e].close(); 207 onClickItem(e) {
203 }, 208 if (this.current !== e) {
204 change(e, type) { 209 this.current = e;
205 this[type] = e; 210 }
206 }, 211 },
207 onClickItem(e) { 212 dropDown() {
208 if (this.current !== e) { 213 console.log("下拉");
209 this.current = e; 214 },
210 } 215 searchKey(e) {
211 }, 216 const { value: keyword } = e.detail;
212 dropDown() { 217 this.keyWords = keyword;
213 console.log("下拉"); 218 store.dispatch("index/search", {
214 }, 219 params: {},
215 searchKey(e) { 220 keyword
216 const { value: keyword } = e.detail; 221 });
217 this.keyWords = keyword; 222 },
218 store.dispatch("index/search", { 223 // 接收菜单结果
219 params: {}, 224 search(e) {
220 keyword 225 const { on, value, selectedData } = e;
221 }); 226 let params = {};
222 }, 227 const selectedPayload = {};
223 // 接收菜单结果 228 for (const key in selectedData) {
224 search(e) { 229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
225 const { on, value, selectedData } = e; 230 selectedPayload[key] = selectedData[key].toString();
226 let params = {}; 231 }
227 const selectedPayload = {}; 232 }
228 for (const key in selectedData) { 233 if (on[0] === 1) {
229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 234 // 若点击全部
230 selectedPayload[key] = selectedData[key].toString(); 235 this.searchText = "";
231 } 236 store.dispatch("index/list");
232 } 237 } else {
233 if (on[0] === 1) { 238 for (let i = 1; i <= on.length; i++) {
234 // 若点击全部 239 // on[0]是全部
235 this.searchText = ""; 240 if (on[i] === 1) {
236 store.dispatch("index/list"); 241 // 若该选项被选中
237 } else { 242 if (this.categoryList[i].value === "filter") {
238 for (let i = 1; i <= on.length; i++) { 243 params = {
239 // on[0]是全部 244 ...selectedPayload,
240 if (on[i] === 1) { 245 ...params
241 // 若该选项被选中 246 };
242 if (this.categoryList[i].value === "filter") { 247 } else {
243 params = { 248 params[`${this.categoryList[i].value}`] = value[i][0];
244 ...selectedPayload, 249 }
245 ...params 250 }
246 }; 251 }
247 } else { 252 store.dispatch("index/search", {
248 params[`${this.categoryList[i].value}`] = value[i][0]; 253 params,
249 } 254 keyword: this.keyWords
250 } 255 });
251 } 256 }
252 store.dispatch("index/search", { 257 }
253 params, 258 }
254 keyword: this.keyWords 259 };
255 }); 260 </script>
256 } 261
257 } 262 <style lang="scss">
258 } 263 .content,.container {
259 }; 264 display: flex;
260 </script> 265 flex-direction: column;
261 266 align-items: center;
262 <style lang="scss"> 267 justify-content: center;
263 .content,.container {
264 display: flex; 268 }
265 flex-direction: column; 269 .header {
266 align-items: center; 270 display: flex;
267 justify-content: center; 271 flex-direction: column;
268 } 272 align-items: center;
269 .header { 273 justify-content: center;
270 display: flex; 274 background-color: #f7f6f6;
271 flex-direction: column; 275 height: 178rpx;
272 align-items: center; 276 width: 100%;
273 justify-content: center; 277 z-index: 999;
274 background-color: #f7f6f6; 278 position: fixed;
275 height: 178rpx; 279 top: 0;
276 width: 100%; 280 left: 0;
277 z-index: 999; 281 }
278 position: fixed; 282 .searchBar {
279 top: 0; 283 width: 670rpx;
280 left: 0; 284 display: flex;
281 } 285 justify-content: center;
282 .searchBar { 286 align-items: center;
283 width: 670rpx; 287 box-sizing: border-box;
284 display: flex; 288 padding: 0rpx 16rpx;
285 justify-content: center; 289 border: 1px solid #ff6b4a;
286 align-items: center; 290 border-radius: 8rpx;
287 box-sizing: border-box; 291 background-color: #ffffff;
288 padding: 0rpx 16rpx; 292 }
289 border: 1px solid #ff6b4a; 293
290 border-radius: 8rpx; 294 .searchIpt {
291 background-color: #ffffff; 295 height: 68rpx;
292 } 296 width: 670rpx;
293 297 padding: 16rpx;
294 .searchIpt { 298 font-size: 28rpx;
295 height: 68rpx; 299 box-sizing: border-box;
296 width: 670rpx; 300 }
297 padding: 16rpx; 301 .screenBar {
298 font-size: 28rpx; 302 width: 670rpx;
299 box-sizing: border-box; 303 height: 110rpx;
300 } 304 display: flex;
301 .screenBar { 305 flex-direction: row;
302 width: 670rpx; 306 justify-content: space-between;
303 height: 110rpx; 307 align-items: center;
304 display: flex; 308 color: #333333;
305 flex-direction: row; 309 font-size: 32rpx;
306 justify-content: space-between; 310 }
307 align-items: center; 311 .active {
308 color: #333333; 312 color: #ff6b4a;
309 font-size: 32rpx; 313 }
310 } 314 .screenItem {
311 .active { 315 display: flex;
312 color: #ff6b4a; 316 justify-content: center;
313 } 317 align-items: center;
314 .screenItem { 318 }
315 display: flex; 319 .content-wrap {
316 justify-content: center; 320 width: 100%;
317 align-items: center; 321 background-color: #ffffff;
318 } 322 }
319 .content-wrap { 323
320 width: 100%; 324 .HMfilterDropdown {
321 background-color: #ffffff; 325 top: 178rpx !important;
322 } 326 }
323 327
324 .HMfilterDropdown { 328 .goods-list {
325 top: 178rpx !important; 329 padding-top: 286rpx;
326 } 330 .loading-text {
327 331 width: 100%;
328 .goods-list { 332 display: flex;
329 padding-top: 286rpx; 333 justify-content: center;
330 .loading-text { 334 align-items: center;
331 width: 100%; 335 height: 30px;
332 display: flex; 336 color: #979797;
333 justify-content: center; 337 font-size: 12px;
334 align-items: center; 338 }
335 height: 30px; 339 .product-list {
336 color: #979797; 340 width: 92%;
337 font-size: 12px; 341 padding: 0 4% 3vw 4%;
338 } 342 display: flex;
339 .product-list { 343 justify-content: space-between;
340 width: 92%; 344 flex-wrap: wrap;
341 padding: 0 4% 3vw 4%; 345 .product {
342 display: flex; 346 width: 48%;
343 justify-content: space-between; 347 min-height: 120rpx;
344 flex-wrap: wrap; 348 margin: 0 0 20rpx 0;
345 .product { 349 background: #ffffff;
346 width: 48%; 350 border: 1px solid #f2f2f2;
347 min-height: 120rpx; 351 }
348 margin: 0 0 20rpx 0; 352 }
349 background: #ffffff; 353 }
350 border: 1px solid #f2f2f2; 354 </style>
src/store/modules/index.js
Diff comments   View file @280fcb8
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 let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"", 10 let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",
11 "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83", 11 "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",
12 "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}} 12 "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}
13 var initArr = [1,2,3,4,5,6,7,8] 13 var initArr = [1,2,3,4,5,6,7,8]
14 let list = [] 14 let list = []
15 initArr.forEach(function (value) { 15 initArr.forEach(function (value) {
16 list.push(initData) 16 list.push(initData)
17 }); 17 });
18 18
19 let categoryList = [
20 {
21 "type": "checkbox",
22 "name": "产品",
23 "value": "category",
24 "submenu": [
25 {
26 "label": "镜框",
27 "name": "镜框",
28 "value": "1"
29 },
30 {
31 "label": "镜片",
32 "name": "镜片",
33 "value": "2"
34 },
35 {
36 "label": "特种镜",
37 "name": "特种镜",
38 "value": "146"
39 }
40 ],
41 "groups": [
42 "001"
43 ]
44 },
45 {
46 "type": "radio",
47 "name": "规则",
48 "value": "px",
49 "submenu": [
50 {
51 "name": "按价格排",
52 "value": "1"
53 },
54 {
55 "name": "按销量排",
56 "value": "2"
57 }
58 ],
59 "groups": [
60 "002"
61 ]
62 },
63 {
64 "type": "radio",
65 "name": "排序",
66 "value": "sort",
67 "submenu": [
68 {
69 "name": "从高到低",
70 "value": "1"
71 },
72 {
73 "name": "从低到高",
74 "value": "2"
75 }
76 ],
77 "groups": [
78 "003"
79 ]
80 },
81 {
82 "type": "filter",
83 "name": "筛选",
84 "value": "filter",
85 "submenu": [
86 {
87 "type": "checkbox",
88 "name": "性别",
89 "value": "sex",
90 "submenu": [
91 {
92 "label": "男性",
93 "name": "男性",
94 "value": "27"
95 },
96 {
97 "label": "女性",
98 "name": "女性",
99 "value": "28"
100 }
101 ]
102 },
103 {
104 "type": "checkbox",
105 "name": "年龄",
106 "value": "age",
107 "submenu": [
108 {
109 "label": "通用",
110 "name": "通用",
111 "value": "24"
112 }
113 ]
114 },
115 {
116 "type": "checkbox",
117 "name": "适用场景",
118 "value": "sense",
119 "submenu": [
120 {
121 "label": "行政风",
122 "name": "行政风",
123 "value": "53"
124 },
125 {
126 "label": "青春学子风",
127 "name": "青春学子风",
128 "value": "54"
129 },
130 {
131 "label": "运动风",
132 "name": "运动风",
133 "value": "55"
134 },
135 {
136 "label": "简约-极简文艺范",
137 "name": "简约-极简文艺范",
138 "value": "56"
139 },
140 {
141 "label": "奶奶风",
142 "name": "奶奶风",
143 "value": "57"
144 },
145 {
146 "label": "流线洛可可",
147 "name": "流线洛可可",
148 "value": "58"
149 },
150 {
151 "label": "自然舒视角",
152 "name": "自然舒视角",
153 "value": "59"
154 },
155 {
156 "label": "无界人文系",
157 "name": "无界人文系",
158 "value": "60"
159 },
160 {
161 "label": "有机未来时",
162 "name": "有机未来时",
163 "value": "61"
164 },
165 {
166 "label": "立体巴洛克",
167 "name": "立体巴洛克",
168 "value": "62"
169 },
170 {
171 "label": "多元新风尚",
172 "name": "多元新风尚",
173 "value": "63"
174 },
175 {
176 "label": "理性几何派",
177 "name": "理性几何派",
178 "value": "64"
179 },
180 {
181 "label": "轻简北欧风",
182 "name": "轻简北欧风",
183 "value": "65"
184 },
185 {
186 "label": "质感哥特潮",
187 "name": "质感哥特潮",
188 "value": "66"
189 },
190 {
191 "label": "时尚",
192 "name": "时尚",
193 "value": "67"
194 },
195 {
196 "label": "复古",
197 "name": "复古",
198 "value": "68"
199 },
200 {
201 "label": "商务",
202 "name": "商务",
203 "value": "69"
204 },
205 {
206 "label": "休闲",
207 "name": "休闲",
208 "value": "70"
209 },
210 {
211 "label": "折射率",
212 "name": "折射率",
213 "value": "285"
214 }
215 ]
216 },
217 {
218 "type": "checkbox",
219 "name": "价格",
220 "value": "price",
221 "submenu": [
222 {
223 "name": "100以下",
224 "value": "1,100"
225 },
226 {
227 "name": "100-300",
228 "value": "100,300"
229 },
230 {
231 "name": "300-1000",
232 "value": "300,1000"
233 },
234 {
235 "name": "1000以上",
236 "value": "1000,-1"
237 }
238 ]
239 },
240 {
241 "type": "checkbox",
242 "name": "材质",
243 "value": "glasscate",
244 "submenu": [
245 {
246 "label": "购易",
247 "name": "购易",
248 "value": "72"
249 },
250 {
251 "label": "海俪恩",
252 "name": "海俪恩",
253 "value": "73"
254 },
255 {
256 "label": "沙漠风暴",
257 "name": "沙漠风暴",
258 "value": "74"
259 },
260 {
261 "label": "古诗",
262 "name": "古诗",
263 "value": "75"
264 },
265 {
266 "label": "暴龙",
267 "name": "暴龙",
268 "value": "76"
269 },
270 {
271 "label": "犀牛",
272 "name": "犀牛",
273 "value": "77"
274 },
275 {
276 "label": "Ray-Ban雷朋",
277 "name": "Ray-Ban雷朋",
278 "value": "78"
279 },
280 {
281 "label": "PARIM派丽蒙",
282 "name": "PARIM派丽蒙",
283 "value": "79"
284 },
285 {
286 "label": "石狼",
287 "name": "石狼",
288 "value": "80"
289 },
290 {
291 "label": "木九十",
292 "name": "木九十",
293 "value": "81"
294 }
295 ]
296 },
297 {
298 "type": "checkbox",
299 "name": "品牌",
300 "value": "brand",
301 "submenu": [
302 {
303 "label": "购易",
304 "name": "购易",
305 "value": "72"
306 },
307 {
308 "label": "海俪恩",
309 "name": "海俪恩",
310 "value": "73"
311 },
312 {
313 "label": "沙漠风暴",
314 "name": "沙漠风暴",
315 "value": "74"
316 },
317 {
318 "label": "古诗",
319 "name": "古诗",
320 "value": "75"
321 },
322 {
323 "label": "暴龙",
324 "name": "暴龙",
325 "value": "76"
326 },
327 {
328 "label": "犀牛",
329 "name": "犀牛",
330 "value": "77"
331 },
332 {
333 "label": "Ray-Ban雷朋",
334 "name": "Ray-Ban雷朋",
335 "value": "78"
336 },
337 {
338 "label": "PARIM派丽蒙",
339 "name": "PARIM派丽蒙",
340 "value": "79"
341 },
342 {
343 "label": "石狼",
344 "name": "石狼",
345 "value": "80"
346 },
347 {
348 "label": "木九十",
349 "name": "木九十",
350 "value": "81"
351 }
352 ]
353 }
354 ],
355 "groups": [
356 "001",
357 "002",
358 "003"
359 ],
360 }
361 ]
362
19 let categoryList = [ 363 //初始化数据是为了显示默认骨架
20 { 364 const state = {
21 "type": "checkbox", 365 categoryList: [],
22 "name": "产品", 366 list: list
23 "value": "category", 367 };
24 "submenu": [ 368
25 { 369 const mutations = {
26 "label": "镜框", 370 LIST: (state, list) => {
27 "name": "镜框", 371 state.list = list;
28 "value": "1" 372 },
29 }, 373 CATEGORY: (state, categoryList) => {
30 { 374 state.categoryList = categoryList;
31 "label": "镜片", 375 }
32 "name": "镜片", 376 };
33 "value": "2" 377
34 }, 378 const actions = {
35 { 379 category({
36 "label": "特种镜", 380 commit
37 "name": "特种镜", 381 }, param) {
38 "value": "146" 382 return new Promise((resolve) => request({
39 } 383 url: category,
40 ], 384 success: (res) => {
41 "groups": [ 385 let data = res.data.data;
42 "001" 386 for (let i = 0; i <= data.length; i++) {
43 ] 387 if (data[i] && data[i].type !== 'filter') {
44 }, 388 data[i].type = 'hierarchy';
45 { 389 }
46 "type": "radio", 390 }
47 "name": "规则", 391 data.unshift({
48 "value": "px", 392 type: "hierarchy",
49 "submenu": [ 393 name: "全部",
50 { 394 value: "all",
51 "name": "按价格排", 395 isNoPull: true,
52 "value": "1" 396 });
53 }, 397 commit('CATEGORY', data);
54 { 398 resolve(data)
55 "name": "按销量排",
56 "value": "2" 399 },
57 } 400 fail: (res) => {
58 ], 401 console.log("fail status === > ", res);
59 "groups": [ 402 }
60 "002" 403 }))
61 ] 404
62 }, 405 },
63 { 406 list({
64 "type": "radio", 407 commit
65 "name": "排序", 408 }, param) {
66 "value": "sort", 409 return new Promise((resolve) => request({
67 "submenu": [ 410 url: shopList,
68 { 411 success: (res) => {
69 "name": "从高到低", 412 commit('LIST', res.data.data)
70 "value": "1" 413 resolve(res.data)
71 },
72 { 414 },
73 "name": "从低到高", 415 fail: (res) => {
74 "value": "2" 416 console.log("fail status === > ", res);
75 } 417 },
76 ], 418 complete: (res) => {
77 "groups": [ 419 state.isLoading = false;
78 "003" 420 },
79 ] 421 }))
80 }, 422 },
81 { 423 search({
82 "type": "filter", 424 commit
83 "name": "筛选", 425 }, {
84 "value": "filter", 426 params,
85 "submenu": [ 427 keyword
86 { 428 }) {
87 "type": "checkbox", 429 const uid = uni.getStorageSync('uid');
88 "name": "性别", 430 return new Promise((resolve) => request({
89 "value": "sex", 431 url: search,
90 "submenu": [ 432 data: {
91 { 433 params: JSON.stringify(params),
92 "label": "男性", 434 uid,
93 "name": "男性", 435 way: 1,
94 "value": "27" 436 keyword,
95 }, 437 },
96 { 438 success: (res) => {
97 "label": "女性", 439 commit('LIST', res.data.data);
98 "name": "女性", 440 resolve(res.data)
99 "value": "28" 441 },
100 } 442 fail: (res) => {
101 ] 443 console.log("fail status === > ", res);
102 }, 444 }
103 { 445 }))
104 "type": "checkbox", 446
105 "name": "年龄", 447 },
106 "value": "age", 448 };
107 "submenu": [ 449
108 { 450 export default {
109 "label": "通用", 451 namespaced: true,
110 "name": "通用", 452 state,
111 "value": "24" 453 mutations,