刘文博 / gulu-vue

Download as
Browse Code »

Commit fe62536c349941b0907444090ad0035068e181ac

Authored by 范牧
2 parents 530bb7e836 1dbb125acb
Exists in master

合并冲突

Showing 10 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @fe62536
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: 54rpx; 80 height: 76rpx;
81 padding: 5px 4%; 81 padding: 5px 4%;
82 box-sizing: border-box;
82 display: -webkit-box; 83 display: -webkit-box;
83 -webkit-box-orient: vertical; 84 -webkit-box-orient: vertical;
84 -webkit-line-clamp: 2; 85 -webkit-line-clamp: 2;
85 text-align: justify; 86 text-align: justify;
86 overflow: hidden; 87 overflow: hidden;
87 font-size: 26rpx; 88 font-size: 26rpx;
88 color: #333333; 89 color: #333333;
89 } 90 }
90 .info { 91 .info {
91 display: flex; 92 display: flex;
92 justify-content: space-between; 93 justify-content: space-between;
93 align-items: center; 94 align-items: center;
94 width: 92%; 95 width: 92%;
95 padding: 5px 4% 5px 4%; 96 padding: 5px 4% 5px 4%;
96 .priceBox { 97 .priceBox {
97 display: flex; 98 display: flex;
98 justify-content: space-between; 99 justify-content: space-between;
99 align-items: center; 100 align-items: center;
100 .price { 101 .price {
101 color: #eb5d3b; 102 color: #eb5d3b;
102 font-size: 28rpx; 103 font-size: 28rpx;
103 font-weight: 600; 104 font-weight: 600;
104 margin-right: 10rpx; 105 margin-right: 10rpx;
105 } 106 }
106 .originCost { 107 .originCost {
107 text-decoration: line-through; 108 text-decoration: line-through;
108 color: #999999; 109 color: #999999;
109 font-size: 20rpx; 110 font-size: 20rpx;
110 } 111 }
111 } 112 }
112 .trade_num { 113 .trade_num {
113 color: #999999; 114 color: #999999;
114 font-size: 20rpx; 115 font-size: 20rpx;
115 } 116 }
116 } 117 }
117 </style> 118 </style>
118 119
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @fe62536
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)" 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) { 375 togglePage (index, isRequest = true) {
376 if (index === this.showPage) { 376 if (index === this.showPage) {
377 this.hidePageLayer(true) 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) 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) { 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 this.confirm() 426 // debugger
427 if(isRequset){
428 this.confirm()
429 }
427 } else { 430 } else {
428 this.pageState.splice(tmpIndex, 1, false) 431 this.pageState.splice(tmpIndex, 1, false)
429 } 432 }
430 this.firstScrollInto = null 433 this.firstScrollInto = null
431 this.secondScrollInto = null 434 this.secondScrollInto = null
432 }, 435 },
433 confirm () { 436 confirm () {
434 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 437 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
435 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 438 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
436 439
437 // 对结果做一下处理 440 // 对结果做一下处理
438 index.forEach((item, i) => { 441 index.forEach((item, i) => {
439 if (typeof (item[0]) === 'object') { 442 if (typeof (item[0]) === 'object') {
440 // 针对筛选结果过一个排序 443 // 针对筛选结果过一个排序
441 item.forEach((s, j) => { 444 item.forEach((s, j) => {
442 if (s != null) { 445 if (s != null) {
443 s.sort((val1, val2) => { 446 s.sort((val1, val2) => {
444 return val1 - val2 447 return val1 - val2
445 }) 448 })
446 item[j] = s 449 item[j] = s
447 s.forEach((v, k) => { 450 s.forEach((v, k) => {
448 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value 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 if (this.subData[i].type === 'radio' && value[i][j][k] == null) { 452 if (this.subData[i].type === 'radio' && value[i][j][k] == null) {
450 value[i][j] = [] 453 value[i][j] = []
451 index[i][j] = [] 454 index[i][j] = []
452 } 455 }
453 }) 456 })
454 } 457 }
455 }) 458 })
456 } else { 459 } else {
457 let submenu = this.subData[i].submenu[item[0]] 460 let submenu = this.subData[i].submenu[item[0]]
458 value[i][0] = submenu && submenu.value 461 value[i][0] = submenu && submenu.value
459 if (value[i].length >= 2 && item[1] != null) { 462 if (value[i].length >= 2 && item[1] != null) {
460 if (submenu.submenu.length > 0) { 463 if (submenu.submenu.length > 0) {
461 submenu = submenu.submenu[item[1]] 464 submenu = submenu.submenu[item[1]]
462 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null 465 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
463 } else { 466 } else {
464 value[i][1] = null 467 value[i][1] = null
465 } 468 }
466 if (value[i].length >= 3 && item[2] != null) { 469 if (value[i].length >= 3 && item[2] != null) {
467 if (submenu.submenu.length > 0) { 470 if (submenu.submenu.length > 0) {
468 submenu = submenu.submenu[item[2]] 471 submenu = submenu.submenu[item[2]]
469 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null 472 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
470 } else { 473 } else {
471 value[i][2] = null 474 value[i][2] = null
472 } 475 }
473 } 476 }
474 } 477 }
475 } 478 }
476 index[i] = item 479 index[i] = item
477 }) 480 })
478 // 输出 481 // 输出
479 this.$emit('search', { 482 this.$emit('search', {
480 index: index, 483 index: index,
481 value: value, 484 value: value,
482 on: this.on, 485 on: this.on,
483 selectedData: this.selectedData 486 selectedData: this.selectedData
484 }) 487 })
485 }, 488 },
486 // show菜单页 489 // show菜单页
487 showPageLayer (index) { 490 showPageLayer (index) {
488 this.processPage(index) 491 this.processPage(index)
489 this.pageState.splice(index, 1, true) 492 this.pageState.splice(index, 1, true)
490 this.$nextTick(() => { 493 this.$nextTick(() => {
491 setTimeout(() => { 494 setTimeout(() => {
492 this.showPage = index 495 this.showPage = index
493 }, 0) 496 }, 0)
494 }) 497 })
495 this.triangleDeg[index] = 180 498 this.triangleDeg[index] = 180
496 }, 499 },
497 reloadActiveMenuArr () { 500 reloadActiveMenuArr () {
498 for (let i = 0; i < this.filterData.length; i++) { 501 for (let i = 0; i < this.filterData.length; i++) {
499 let tmpitem = this.filterData[i] 502 let tmpitem = this.filterData[i]
500 const tmpArr = this.processActive(tmpitem) 503 const tmpArr = this.processActive(tmpitem)
501 tmpitem = this.processSubMenu(tmpitem) 504 tmpitem = this.processSubMenu(tmpitem)
502 if (this.activeMenuArr[i].length !== tmpArr.length) { 505 if (this.activeMenuArr[i].length !== tmpArr.length) {
503 this.filterData[i] = tmpitem 506 this.filterData[i] = tmpitem
504 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 507 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
505 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 508 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
506 } 509 }
507 } 510 }
508 this.subData = this.filterData 511 this.subData = this.filterData
509 this.$forceUpdate() 512 this.$forceUpdate()
510 }, 513 },
511 processPage (index) { 514 processPage (index) {
512 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 515 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
513 this.reloadActiveMenuArr() 516 this.reloadActiveMenuArr()
514 // 重置UI控制数组 517 // 重置UI控制数组
515 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) 518 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
516 if (this.menu[index].type === 'filter') { 519 if (this.menu[index].type === 'filter') {
517 // 重载筛选页选中状态 520 // 重载筛选页选中状态
518 const level = this.shadowActiveMenuArr[index].length 521 const level = this.shadowActiveMenuArr[index].length
519 for (let i = 0; i < level; i++) { 522 for (let i = 0; i < level; i++) {
520 const box = this.subData[index].submenu[i].submenu 523 const box = this.subData[index].submenu[i].submenu
521 for (let j = 0; j < box.length; j++) { 524 for (let j = 0; j < box.length; j++) {
522 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 525 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
523 this.subData[index].submenu[i].submenu[j].selected = true 526 this.subData[index].submenu[i].submenu[j].selected = true
524 } else { 527 } else {
525 this.subData[index].submenu[i].submenu[j].selected = false 528 this.subData[index].submenu[i].submenu[j].selected = false
526 } 529 }
527 } 530 }
528 } 531 }
529 } else if (this.menu[index].type === 'hierarchy') { 532 } else if (this.menu[index].type === 'hierarchy') {
530 this.$nextTick(() => { 533 this.$nextTick(() => {
531 setTimeout(() => { 534 setTimeout(() => {
532 // 滚动到选中项 535 // 滚动到选中项
533 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) 536 this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
534 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) 537 this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
535 }, 0) 538 }, 0)
536 }) 539 })
537 } else if (this.menu[index].type === 'radio') { 540 } else if (this.menu[index].type === 'radio') {
538 // 重载筛选页选中状态 541 // 重载筛选页选中状态
539 const level = this.shadowActiveMenuArr[index].length 542 const level = this.shadowActiveMenuArr[index].length
540 for (let i = 0; i < level; i++) { 543 for (let i = 0; i < level; i++) {
541 const box = this.subData[index].submenu[i].submenu 544 const box = this.subData[index].submenu[i].submenu
542 for (let j = 0; j < box.length; j++) { 545 for (let j = 0; j < box.length; j++) {
543 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 546 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
544 this.subData[index].submenu[i].submenu[j].selected = true 547 this.subData[index].submenu[i].submenu[j].selected = true
545 } else { 548 } else {
546 this.subData[index].submenu[i].submenu[j].selected = false 549 this.subData[index].submenu[i].submenu[j].selected = false
547 } 550 }
548 } 551 }
549 } 552 }
550 } 553 }
551 }, 554 },
552 processActive (tmpitem) { 555 processActive (tmpitem) {
553 const tmpArr = [] 556 const tmpArr = []
554 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { 557 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
555 let level = this.getMaxFloor(tmpitem.submenu) 558 let level = this.getMaxFloor(tmpitem.submenu)
556 while (level > 0) { 559 while (level > 0) {
557 tmpArr.push(0) 560 tmpArr.push(0)
558 level-- 561 level--
559 } 562 }
560 } else if (tmpitem.type === 'filter') { 563 } else if (tmpitem.type === 'filter') {
561 let level = tmpitem.submenu.length 564 let level = tmpitem.submenu.length
562 while (level > 0) { 565 while (level > 0) {
563 tmpArr.push([]) 566 tmpArr.push([])
564 level-- 567 level--
565 } 568 }
566 } else if (tmpitem.type === 'radio') { 569 } else if (tmpitem.type === 'radio') {
567 let level = tmpitem.submenu.length 570 let level = tmpitem.submenu.length
568 while (level > 0) { 571 while (level > 0) {
569 tmpArr.push([]) 572 tmpArr.push([])
570 level-- 573 level--
571 } 574 }
572 } 575 }
573 return tmpArr 576 return tmpArr
574 }, 577 },
575 processSubMenu (menu) { 578 processSubMenu (menu) {
576 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 579 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
577 for (let i = 0; i < menu.submenu.length; i++) { 580 for (let i = 0; i < menu.submenu.length; i++) {
578 menu.submenu[i] = this.processSubMenu(menu.submenu[i]) 581 menu.submenu[i] = this.processSubMenu(menu.submenu[i])
579 } 582 }
580 } else { 583 } else {
581 menu.submenu = [] 584 menu.submenu = []
582 } 585 }
583 return menu 586 return menu
584 }, 587 },
585 // 计算菜单层级 588 // 计算菜单层级
586 getMaxFloor (treeData) { 589 getMaxFloor (treeData) {
587 const floor = 0 590 const floor = 0
588 let max = 0 591 let max = 0
589 function each (data, floor) { 592 function each (data, floor) {
590 data.forEach(e => { 593 data.forEach(e => {
591 max = floor > max ? floor : max 594 max = floor > max ? floor : max
592 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 595 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
593 each(e.submenu, floor + 1) 596 each(e.submenu, floor + 1)
594 } 597 }
595 }) 598 })
596 } 599 }
597 each(treeData, 1) 600 each(treeData, 1)
598 601
599 return max 602 return max
600 }, 603 },
601 discard () { 604 discard () {
602 605
603 } 606 }
604 } 607 }
605 } 608 }
606 </script> 609 </script>
607 <style lang="scss"> 610 <style lang="scss">
608 .HMfilterDropdown { 611 .HMfilterDropdown {
609 flex-shrink: 0; 612 flex-shrink: 0;
610 width: 100%; 613 width: 100%;
611 height: 44px; 614 height: 44px;
612 position: fixed; 615 position: fixed;
613 z-index: 997; 616 z-index: 997;
614 flex-wrap: nowrap; 617 flex-wrap: nowrap;
615 display: flex; 618 display: flex;
616 flex-direction: row; 619 flex-direction: row;
617 top: var(--window-top); 620 top: var(--window-top);
618 left: 0; 621 left: 0;
619 view { 622 view {
620 display: flex; 623 display: flex;
621 flex-wrap: nowrap; 624 flex-wrap: nowrap;
622 } 625 }
623 } 626 }
624 .region { 627 .region {
625 flex: 1; 628 flex: 1;
626 height: 44px; 629 height: 44px;
627 } 630 }
628 .nav { 631 .nav {
629 width: 100%; 632 width: 100%;
630 height: 44px; 633 height: 44px;
631 z-index: 12; 634 z-index: 12;
632 background-color: #ffffff; 635 background-color: #ffffff;
633 flex-direction: row; 636 flex-direction: row;
634 .first-menu { 637 .first-menu {
635 width: 100%; 638 width: 100%;
636 font-size: 16px; 639 font-size: 16px;
637 color: #333333; 640 color: #333333;
638 flex-direction: row; 641 flex-direction: row;
639 align-items: center; 642 align-items: center;
640 justify-content: center; 643 justify-content: center;
641 transition: color 0.2s linear; 644 transition: color 0.2s linear;
642 645
643 &.on { 646 &.on {
644 color: #ff6b4a; 647 color: #ff6b4a;
645 648
646 .iconfont { 649 .iconfont {
647 color: #ff6b4a; 650 color: #ff6b4a;
648 } 651 }
649 } 652 }
650 .name { 653 .name {
651 height: 20px; 654 height: 20px;
652 // font-size: 16px; 655 // font-size: 16px;
653 text-align: center; 656 text-align: center;
654 text-overflow: clip; 657 text-overflow: clip;
655 overflow: hidden; 658 overflow: hidden;
656 } 659 }
657 .iconfont { 660 .iconfont {
658 width: 13px; 661 width: 13px;
659 height: 13px; 662 height: 13px;
660 line-height: 16px; 663 line-height: 16px;
661 align-items: center; 664 align-items: center;
662 justify-content: center; 665 justify-content: center;
663 transition: transform 0.2s linear, color 0.2s linear; 666 transition: transform 0.2s linear, color 0.2s linear;
664 } 667 }
665 } 668 }
666 } 669 }
667 .sub-menu-class { 670 .sub-menu-class {
668 width: 100%; 671 width: 100%;
669 position: absolute; 672 position: absolute;
670 left: 0; 673 left: 0;
671 transform: translate3d(0, -100%, 0); 674 transform: translate3d(0, -100%, 0);
672 max-height: 345px; 675 max-height: 345px;
673 background-color: #ffffff; 676 background-color: #ffffff;
674 z-index: 11; 677 z-index: 11;
675 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 678 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
676 overflow: hidden; 679 overflow: hidden;
677 flex-direction: row; 680 flex-direction: row;
678 transition: transform 0.15s linear; 681 transition: transform 0.15s linear;
679 &.hide { 682 &.hide {
680 display: none; 683 display: none;
681 } 684 }
682 685
683 &.show { 686 &.show {
684 transform: translate3d(0, calc(44px + 1rpx), 0); 687 transform: translate3d(0, calc(44px + 1rpx), 0);
685 } 688 }
686 } 689 }
687 .sub-menu-list { 690 .sub-menu-list {
688 width: 100%; 691 width: 100%;
689 height: 345px; 692 height: 345px;
690 flex-direction: column; 693 flex-direction: column;
691 .sub-menu { 694 .sub-menu {
692 min-height: 44px; 695 min-height: 44px;
693 font-size: 13px; 696 font-size: 13px;
694 flex-direction: column; 697 flex-direction: column;
695 padding-right: 15px; 698 padding-right: 15px;
696 > .menu-name { 699 > .menu-name {
697 height: 44px; 700 height: 44px;
698 flex-direction: row; 701 flex-direction: row;
699 align-items: center; 702 align-items: center;
700 justify-content: space-between; 703 justify-content: space-between;
701 > .iconfont { 704 > .iconfont {
702 display: none; 705 display: none;
703 font-size: 18px; 706 font-size: 18px;
704 color: #ff6b4a; 707 color: #ff6b4a;
705 } 708 }
706 } 709 }
707 } 710 }
708 &.first { 711 &.first {
709 flex-shrink: 0; 712 flex-shrink: 0;
710 width: 236rpx; 713 width: 236rpx;
711 background-color: #f0f0f0; 714 background-color: #f0f0f0;
712 .sub-menu { 715 .sub-menu {
713 padding-left: 15px; 716 padding-left: 15px;
714 717
715 &.on { 718 &.on {
716 background-color: #fff; 719 background-color: #fff;
717 } 720 }
718 } 721 }
719 } 722 }
720 &.alone { 723 &.alone {
721 max-height: 345px; 724 max-height: 345px;
722 min-height: 60rpx; 725 min-height: 60rpx;
723 height: auto; 726 height: auto;
724 .sub-menu { 727 .sub-menu {
725 min-height: calc(44px - 1rpx); 728 min-height: calc(44px - 1rpx);
726 margin-left: 15px; 729 margin-left: 15px;
727 border-bottom: solid 1rpx #e5e5e5; 730 border-bottom: solid 1rpx #e5e5e5;
728 731
729 &.on { 732 &.on {
730 color: #ff6b4a; 733 color: #ff6b4a;
731 734
732 > .menu-name { 735 > .menu-name {
733 > .iconfont { 736 > .iconfont {
734 display: block; 737 display: block;
735 } 738 }
736 } 739 }
737 } 740 }
738 } 741 }
739 } 742 }
740 &.not-first { 743 &.not-first {
741 .sub-menu { 744 .sub-menu {
742 min-height: calc(44px - 1rpx); 745 min-height: calc(44px - 1rpx);
743 margin-left: 15px; 746 margin-left: 15px;
744 border-bottom: solid 1rpx #e5e5e5; 747 border-bottom: solid 1rpx #e5e5e5;
745 > .menu-name { 748 > .menu-name {
746 height: calc(44px - 1rpx); 749 height: calc(44px - 1rpx);
747 > .iconfont { 750 > .iconfont {
748 display: none; 751 display: none;
749 font-size: 18px; 752 font-size: 18px;
750 color: #ff6b4a; 753 color: #ff6b4a;
751 } 754 }
752 } 755 }
753 &.on { 756 &.on {
754 color: #ff6b4a; 757 color: #ff6b4a;
755 > .menu-name { 758 > .menu-name {
756 > .iconfont { 759 > .iconfont {
757 display: block; 760 display: block;
758 } 761 }
759 } 762 }
760 } 763 }
761 .more-sub-menu { 764 .more-sub-menu {
762 flex-direction: row; 765 flex-direction: row;
763 flex-wrap: wrap; 766 flex-wrap: wrap;
764 padding-bottom: 9px; 767 padding-bottom: 9px;
765 > text { 768 > text {
766 height: 30px; 769 height: 30px;
767 border-radius: 3px; 770 border-radius: 3px;
768 background-color: #f5f5f5; 771 background-color: #f5f5f5;
769 color: #9b9b9b; 772 color: #9b9b9b;
770 margin-bottom: 6px; 773 margin-bottom: 6px;
771 margin-right: 6px; 774 margin-right: 6px;
772 text-align: center; 775 text-align: center;
773 line-height: 30px; 776 line-height: 30px;
774 border: solid #f5f5f5 1rpx; 777 border: solid #f5f5f5 1rpx;
775 flex: 0 0 calc(33.33% - 6px); 778 flex: 0 0 calc(33.33% - 6px);
776 overflow: hidden; 779 overflow: hidden;
777 font-size: 12px; 780 font-size: 12px;
778 &:nth-child(3n) { 781 &:nth-child(3n) {
779 margin-right: 0; 782 margin-right: 0;
780 } 783 }
781 &.on { 784 &.on {
782 border-color: #f6c8ac; 785 border-color: #f6c8ac;
783 color: #ff6b4a; 786 color: #ff6b4a;
784 } 787 }
785 .iconfont { 788 .iconfont {
786 color: #9b9b9b; 789 color: #9b9b9b;
787 } 790 }
788 } 791 }
789 } 792 }
790 } 793 }
791 } 794 }
792 } 795 }
793 .filter { 796 .filter {
794 width: 100%; 797 width: 100%;
795 height: 345px; 798 height: 345px;
796 display: flex; 799 display: flex;
797 flex-direction: column; 800 flex-direction: column;
798 justify-content: space-between; 801 justify-content: space-between;
799 align-items: center; 802 align-items: center;
800 .menu-box { 803 .menu-box {
801 width: 698rpx; 804 width: 698rpx;
802 height: calc(345px - 75px); 805 height: calc(345px - 75px);
803 flex-shrink: 1; 806 flex-shrink: 1;
804 .box { 807 .box {
805 width: 100%; 808 width: 100%;
806 margin-top: 16px; 809 margin-top: 16px;
807 flex-direction: column; 810 flex-direction: column;
808 .title { 811 .title {
809 width: 100%; 812 width: 100%;
810 font-size: 13px; 813 font-size: 13px;
811 color: #888; 814 color: #888;
812 } 815 }
813 .labels { 816 .labels {
814 flex-direction: row; 817 flex-direction: row;
815 flex-wrap: wrap; 818 flex-wrap: wrap;
819 justify-content: space-between;
816 .on { 820 .on {
817 border-color: #ff6b4a; 821 border-color: #ff6b4a;
818 background-color: #ff6b4a; 822 background-color: #ff6b4a;
819 color: #fff; 823 color: #fff;
820 } 824 }
821 > view { 825 > view {
822 width: 148rpx; 826 width: 220rpx;
823 height: 30px; 827 height: 30px;
824 border: solid 1rpx #adadad; 828 border: solid 1rpx #adadad;
825 border-radius: 2px; 829 border-radius: 2px;
826 margin-right: 15px; 830 margin-right: 2px;
827 margin-top: 8px; 831 margin-top: 8px;
828 padding: 0 16rpx; 832 padding: 0 10rpx;
829 box-sizing: border-box; 833 box-sizing: border-box;
830 font-size: 12px; 834 font-size: 12px;
831 flex-direction: row; 835 flex-direction: row;
832 justify-content: center; 836 justify-content: center;
833 align-items: center; 837 align-items: center;
834 overflow: hidden; 838 overflow: hidden;
835 white-space: nowrap; 839 white-space: nowrap;
836 text-overflow: ellipsis; 840 text-overflow: ellipsis;
837 &:nth-child(4n) { 841 &:nth-child(4n) {
838 margin-right: 0; 842 margin-right: 0;
839 } 843 }
840 } 844 }
841 } 845 }
842 } 846 }
843 } 847 }
844 .btn-box { 848 .btn-box {
845 flex-shrink: 0; 849 flex-shrink: 0;
846 width: 100%; 850 width: 100%;
847 height: 75px; 851 height: 75px;
848 flex-direction: row !important; 852 flex-direction: row !important;
849 align-items: center; 853 align-items: center;
850 justify-content: space-between; 854 justify-content: space-between;
851 > view { 855 > view {
852 width: 320rpx; 856 width: 320rpx;
853 height: 40px; 857 height: 40px;
854 border-radius: 40px; 858 border-radius: 40px;
855 border: solid 1rpx #ff6b4a; 859 border: solid 1rpx #ff6b4a;
856 align-items: center; 860 align-items: center;
857 justify-content: center; 861 justify-content: center;
858 } 862 }
859 .reset { 863 .reset {
860 color: #ff6b4a; 864 color: #ff6b4a;
861 } 865 }
862 .submit { 866 .submit {
863 color: #fff; 867 color: #fff;
864 background-color: #ff6b4a; 868 background-color: #ff6b4a;
865 } 869 }
866 } 870 }
867 } 871 }
868 .mask { 872 .mask {
869 z-index: 10; 873 z-index: 10;
870 position: fixed; 874 position: fixed;
871 top: 0; 875 top: 0;
872 left: 0; 876 left: 0;
873 right: 0; 877 right: 0;
874 bottom: 0; 878 bottom: 0;
875 background-color: rgba(0, 0, 0, 0); 879 background-color: rgba(0, 0, 0, 0);
876 transition: background-color 0.15s linear; 880 transition: background-color 0.15s linear;
877 &.show { 881 &.show {
878 background-color: rgba(0, 0, 0, 0.5); 882 background-color: rgba(0, 0, 0, 0.5);
879 } 883 }
880 &.hide { 884 &.hide {
881 display: none; 885 display: none;
882 } 886 }
883 } 887 }
884 /* 字体图标 */ 888 /* 字体图标 */
885 @font-face { 889 @font-face {
886 font-family: "HM-FD-font"; 890 font-family: "HM-FD-font";
887 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="); 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 .iconfont { 893 .iconfont {
890 font-family: "HM-FD-font" !important; 894 font-family: "HM-FD-font" !important;
891 font-size: 13px; 895 font-size: 13px;
892 font-style: normal; 896 font-style: normal;
893 color: #757575; 897 color: #757575;
894 &.triangle { 898 &.triangle {
895 &:before { 899 &:before {
896 content: "\e65a"; 900 content: "\e65a";
897 } 901 }
898 } 902 }
899 &.selected { 903 &.selected {
900 &:before { 904 &:before {
901 content: "\e607"; 905 content: "\e607";
902 } 906 }
903 } 907 }
904 } 908 }
905 </style> 909 </style>
906 910
src/components/sl-filter/filter-view.vue
Diff comments   View file @fe62536
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>
476
src/components/sl-filter/iconfont/iconfont.css
Diff comments   View file @fe62536
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 }
21
src/components/sl-filter/popup-layer.vue
Diff comments   View file @fe62536
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>
123
src/components/sl-filter/sl-filter.vue
Diff comments   View file @fe62536
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>
318
src/pages/cart/cart.vue
Diff comments   View file @fe62536
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view 9 <view
10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 @click="pClick"
11 > 12 >
12 <span class="correct"></span> 13 <span class="correct"></span>
13 </view> 14 </view>
14 <image 15 <image
15 src="../../static/store.png" 16 src="../../static/store.png"
16 mode="aspectFill" 17 mode="aspectFill"
17 ></image> 18 ></image>
18 <text>非常戴镜</text> 19 <text>非常戴镜</text>
19 </view> 20 </view>
20 <view 21 <view
21 class="cardBody" 22 class="cardBody"
22 v-for="(item,index) in cartList" 23 v-for="(item,index) in cartList"
23 :key="index" 24 :key="index"
24 @longpress="delCart(item.cart_id,index)" 25 @longpress="delCart(item.cart_id,index)"
25 > 26 >
26 <view 27 <view
27 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 28 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29 @click="childClick(cartList[index],index)"
28 > 30 >
29 <span class="correct"></span> 31 <span class="correct"></span>
30 </view> 32 </view>
31 <view class="imageWrap"> 33 <view class="imageWrap">
32 <image 34 <image
33 :src="item.img_index_url" 35 :src="item.img_index_url"
34 mode="aspectFit" 36 mode="aspectFit"
35 style="width: 188rpx;height: 168rpx;" 37 style="width: 188rpx;height: 168rpx;"
36 ></image> 38 ></image>
37 </view> 39 </view>
38 <view class="goodInfo"> 40 <view class="goodInfo">
39 <!-- <view class="imageWrap"> 41 <!-- <view class="imageWrap">
40 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
41 </view> --> 43 </view> -->
42 <view class="infoRight"> 44 <view class="infoRight">
43 <view 45 <view
44 class="goodName" 46 class="goodName"
45 @tap="toGoods(item.pid,item.sk_id)" 47 @tap="toGoods(item.pid,item.sk_id)"
46 >{{item.p_name}}</view> 48 >{{item.p_name}}</view>
47 <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"> 49 <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
48 <view class="desL"> 50 <view class="desL">
49 <view class="people"> 51 <view class="people">
50 使用人：{{item.peopleName}} 52 使用人：{{item.peopleName}}
51 </view> 53 </view>
52 <view class="skuInfo"> 54 <view class="skuInfo">
53 {{item.sku_name}} 55 {{item.sku_name}}
54 </view> 56 </view>
55 </view> 57 </view>
56 <view class="desR"> 58 <view class="desR">
57 <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image> 59 <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
58 </view> 60 </view>
59 </view> 61 </view>
60 <view class="priceBox"> 62 <view class="priceBox">
61 <view class="price">￥{{item.nowPrice*item.num}}</view> 63 <view class="price">￥{{item.nowPrice*item.num}}</view>
62 <text class="maxCount">(限购{{maxCount}}副)</text> 64 <text class="maxCount">(限购{{maxCount}}副)</text>
63 <view class="counter"> 65 <view class="counter">
64 <view 66 <view
65 class="btn" 67 class="btn"
66 disabled="this.addDisabled" 68 disabled="this.addDisabled"
67 type="default" 69 type="default"
68 @tap="counter(index,false,item)" 70 @tap="counter(index,false,item)"
69 >-</view> 71 >-</view>
70 <text>{{item.num}}</text> 72 <text>{{item.num}}</text>
71 <view 73 <view
72 class="btn" 74 class="btn"
73 disabled="this.desDisabled" 75 disabled="this.desDisabled"
74 type="default" 76 type="default"
75 @tap="counter(index,true,item)" 77 @tap="counter(index,true,item)"
76 >+</view> 78 >+</view>
77 </view> 79 </view>
78 </view> 80 </view>
79 </view> 81 </view>
80 </view> 82 </view>
81 </view> 83 </view>
82 </view> 84 </view>
83 </block> 85 </block>
84 <view class="footer"> 86 <view class="footer">
85 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 87 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
86 <view class="footerRight"> 88 <view class="footerRight">
87 <view class="paybtn" @click="toComfirmOrder">立即结算</view> 89 <view class="paybtn" @click="toComfirmOrder">立即结算</view>
88 </view> 90 </view>
89 </view> 91 </view>
90 <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id" 92 <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
91 :index="cartIndex" 93 :index="cartIndex"
92 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> 94 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
93 </view> 95 </view>
94 </template> 96 </template>
95 97
96 <script> 98 <script>
97 99
98 import store from '@/store' 100 import store from '@/store'
99 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'; 101 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
100 export default { 102 export default {
101 components:{ 103 components:{
102 BottomSheet, 104 BottomSheet,
103 }, 105 },
104 data() { 106 data() {
105 return { 107 return {
106 pid:Number, 108 pid:Number,
107 isCart:Number, 109 isCart:Number,
108 sk_id:String, 110 sk_id:String,
109 mp_id:String, 111 mp_id:String,
110 isShowBottom : false, //底部弹窗开关 112 isShowBottom : false, //底部弹窗开关
111 totalPrice: 0,
112 pIsoPen: false,
113 // childIsOpen:[],
114 cart_id:Number, 113 cart_id:Number,
115 maxCount: 20, 114 maxCount: 20,
116 cartIndex:Number 115 cartIndex:Number,
116 cartList:[]
117 } 117 }
118 }, 118 },
119 computed: { 119 computed: {
120 // skInfo(){ 120 pIsoPen (){
121 // return filters() 121 if (this.cartList.length > 0){
122 // } 122 return this.cartList.find(item => !item.isChecked) ? false : true;
123 }
124 return false
125 },
123 goodInfo () { 126 goodInfo () {
124 // console.log(this.$store.state.read.goodInfo)
125 return this.$store.state.read.goodInfo 127 return this.$store.state.read.goodInfo
126 }, 128 },
127 cartList() { 129 totalPrice() {
128 // console.log('cart-list', this.$store.state.cart.cartList); 130 let totalPrice = 0
129 // this.totalPrice=0 131 this.cartList.forEach((item)=>{
130 return this.$store.state.cart.cartList 132 if(item.isChecked){
131 }, 133 totalPrice += item.nowPrice * item.num;
132 childIsOpen() { 134 }
133 const temp = [] 135 })
134 temp.length = this.$store.state.cart.cartList.length 136 return totalPrice
135 for (let i = 0; i < temp.length; i++) { 137 }
136 temp[i] = false
137 }
138 // console.log('this.childisOPne===>', temp)
139 return temp
140 },
141 },
142 onShow() {
143 this.pIsoPen = false
144 }, 138 },
145 onLoad: function() { 139 onLoad: async function() {
146 store.dispatch('cart/getCartList', { 140 await this.$store.dispatch('cart/getCartList', {
147 uid: this.$store.state.user.userInfo.uid, // 用户id 141 uid: this.$store.state.user.userInfo.uid, // 用户id
148 }) 142 })
143
144 this.cartList = this.$store.state.cart.cartList;
145 this.cartList.forEach((item)=>{
146 item.isChecked = false
147 })
149 }, 148 },
150 methods: { 149 methods: {
150 //全选按钮
151 pClick(){
152 let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
153 let oldList = this.cartList;
154 oldList.forEach((item, index)=>{
155 item.isChecked = !pStatus
156 this.cartList.splice(index,1, item)
157 })
158 },
159 //单选按钮
160 childClick(type,index){
161 this.cartList[index].isChecked = !this.cartList[index].isChecked
162 //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
163 this.cartList.splice(index,1, this.cartList[index])
164 },
151 //修改购物车 165 //修改购物车
152 chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){ 166 chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
153 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) 167 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
154 store.dispatch('cart/modiCart', { 168 store.dispatch('cart/modiCart', {
155 uid: this.$store.state.user.userInfo.uid, 169 uid: this.$store.state.user.userInfo.uid,
156 openid: this.$store.state.user.userInfo.openid, 170 openid: this.$store.state.user.userInfo.openid,
157 mp_id: mp_id, 171 mp_id: mp_id,
158 sk_id: sk_id, 172 sk_id: sk_id,
159 price: price, 173 price: price,
160 pid: pid, 174 pid: pid,
161 num: num, 175 num: num,
162 cart_id: cart_id, 176 cart_id: cart_id,
163 args: { 177 args: {
164 index: index, 178 index: index,
165 }, 179 },
166 }) 180 })
167 store.dispatch('cart/getCartList', { 181 store.dispatch('cart/getCartList', {
168 uid: this.$store.state.user.userInfo.uid, // 用户id 182 uid: this.$store.state.user.userInfo.uid, // 用户id
169 }) 183 })
170 184
171 this.$forceUpdate() 185 this.$forceUpdate()
172 console.log('21212121212',this.cartList) 186 // console.log('21212121212',this.cartList)
173 }, 187 },
174 //底部弹窗开关 188 //底部弹窗开关
175 showBottom(isCart,pid,skId,mp_id,cart_id,index){ 189 showBottom(isCart,pid,skId,mp_id,cart_id,index){
176 store.dispatch('read/fetch', { 190 store.dispatch('read/fetch', {
177 pid, 191 pid,
178 sk_id: skId, 192 sk_id: skId,
179 }).then(()=>{ 193 }).then(()=>{
180 this.cartIndex = index 194 this.cartIndex = index
181 this.sk_id = skId; 195 this.sk_id = skId;
182 this.pid = pid; 196 this.pid = pid;
183 this.mp_id = mp_id; 197 this.mp_id = mp_id;
184 this.isCart = isCart; 198 this.isCart = isCart;
185 this.cart_id = cart_id; 199 this.cart_id = cart_id;
186 this.isShowBottom = true; 200 this.isShowBottom = true;
187 }) 201 })
188 }, 202 },
189 closeBottom(){ 203 closeBottom(){
190 this.isShowBottom = false; 204 this.isShowBottom = false;
191 }, 205 },
192 toGoods(id, sk_id) { 206 toGoods(id, sk_id) {
193 console.log('cart-list', this.$store.state.cart.cartList)
194 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
195 uni.navigateTo({ 207 uni.navigateTo({
196 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, 208 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
197 success: res => {}, 209 success: res => {},
198 fail: () => {}, 210 fail: () => {},
199 complete: () => {}, 211 complete: () => {},
200 }) 212 })
201 }, 213 },
202 toComfirmOrder(){ 214 toComfirmOrder(){
203 uni.navigateTo({ 215 uni.navigateTo({
204 url:`../confirmOrder/confirmOrder`, 216 url:`../confirmOrder/confirmOrder`,
205 }) 217 })
206 }, 218 },
207 counter(index, isadd, item) { 219 counter(index, isadd, item) {
208 // console.log('===>>counter ===>num',num) 220 // console.log('item=====>', item)
209 // console.log('===>>counter ===>isadd',isadd) 221 // console.log('num=====>', item.num)
210 console.log('item=====>', item)
211 console.log('num=====>', item.num)
212 const nums = parseInt(item.num) 222 const nums = parseInt(item.num)
213 if (isadd) { 223 if (isadd) {
214 if (nums >= this.maxCount) { 224 if (nums >= this.maxCount) {
215 this.addDisabled = true 225 this.addDisabled = true
216 } else { 226 } else {
217 this.addDisabled = true 227 this.addDisabled = true
218 // 修改num
219 // if (this.childIsOpen[index]) {
220 // this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
221 // }
222 store.dispatch('cart/modiCart', { 228 store.dispatch('cart/modiCart', {
223 uid: this.$store.state.user.userInfo.uid, 229 uid: this.$store.state.user.userInfo.uid,
224 openid: this.$store.state.user.userInfo.openid, 230 openid: this.$store.state.user.userInfo.openid,
225 mp_id: item.mp_id, 231 mp_id: item.mp_id,
226 sk_id: item.sk_id, 232 sk_id: item.sk_id,
227 price: item.nowPrice, 233 price: item.nowPrice,
228 pid: item.pid, 234 pid: item.pid,
229 num: nums + 1, 235 num: nums + 1,
230 cart_id: item.cart_id, 236 cart_id: item.cart_id,
231 args: { 237 args: {
232 index: index, 238 index: index,
233 isadd: isadd, 239 isadd: isadd,
234 }, 240 },
235 }) 241 })
236 this.addDisabled = false 242 this.addDisabled = false
237 } 243 }
238 } else { 244 } else {
239 if (nums <= 1) { 245 if (nums <= 1) {
240 this.desDisabled = true 246 this.desDisabled = true
241 } else { 247 } else {
242 this.desDisabled = false 248 this.desDisabled = false
243 // post 请求修改相关参数 249
244 // if (this.childIsOpen[index]) {
245 // this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
246 // }
247 store.dispatch('cart/modiCart', { 250 store.dispatch('cart/modiCart', {
248 uid: this.$store.state.user.userInfo.uid, 251 uid: this.$store.state.user.userInfo.uid,
249 openid: this.$store.state.user.userInfo.openid, 252 openid: this.$store.state.user.userInfo.openid,
250 mp_id: item.mp_id, 253 mp_id: item.mp_id,
251 sk_id: item.sk_id, 254 sk_id: item.sk_id,
252 price: item.nowPrice, 255 price: item.nowPrice,
253 pid: item.pid, 256 pid: item.pid,
254 num: nums - 1, 257 num: nums - 1,
255 cart_id: item.cart_id, 258 cart_id: item.cart_id,
256 args: { 259 args: {
257 index: index, 260 index: index,
258 isadd: isadd, 261 isadd: isadd,
259 }, 262 },
260 }) 263 })
261 this.desDisabled = true 264 this.desDisabled = true
262 } 265 }
263 } 266 }
264 267
265 }, 268 },
266 // Change(isopen, indexC) {
267 // // console.log('lalla===>',isopen)
268 // this.childIsOpen[indexC] = !isopen
269 // if (!isopen) {
270 // this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
271 // } else {
272 // this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
273 // }
274 // let m = true
275 // for (let i = 0; i < this.childIsOpen.length; i++) {
276 // m = m & this.childIsOpen[i]
277 // }
278 // if (m === 1) {
279 // this.pIsoPen = true
280 // } else {
281 // this.pIsoPen = false
282 // }
283 // },
284 // pChange(isopen) {
285 // this.pIsoPen = !isopen
286 // for (let i = 0; i < this.childIsOpen.length; i++) {
287 // this.childIsOpen[i] = !isopen
288 // }
289 // if (this.pIsoPen) {
290 // // 计算总价逻辑
291 // if (this.childIsOpen.length !== 0) {
292 // for (let i = 0; i < this.childIsOpen.length; i++) {
293 // if (this.childIsOpen[i]) {
294 // this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
295 // }
296 // }
297 // }
298 // } else {
299 // this.totalPrice = 0
300 // }
301 // },
302 delCart(cart_id, index) { 269 delCart(cart_id, index) {
303 // console.log('userInfo',this.$store.state.user.userInfo)
304 cart_id = parseInt(cart_id) 270 cart_id = parseInt(cart_id)
305 // console.log('delcart------>cart_id',cart_id)
306 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
307 // console.log('delcart======>index',index)
308 uni.showModal({ 271 uni.showModal({
309 title: '是否删除该商品', 272 title: '是否删除该商品',
310 // content: '是否删除该商品',
311 success: function (res) { 273 success: function (res) {
312 if (res.confirm) { 274 if (res.confirm) {
313 // if (this.childIsOpen[index]) { 275
314 // this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
315 // }
316 console.log('index===>',index)
317 store.dispatch('cart/delCart', { 276 store.dispatch('cart/delCart', {
318 uid: this.$store.state.user.userInfo.uid, 277 uid: this.$store.state.user.userInfo.uid,
319 openid: this.$store.state.user.userInfo.openid, 278 openid: this.$store.state.user.userInfo.openid,
320 cart_id: cart_id, // 要修改的购物车id 279 cart_id: cart_id, // 要修改的购物车id
321 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 280 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
322 }) 281 })
323 } 282 }
324 }.bind(this), 283 }.bind(this),
325 }) 284 })
326 }, 285 },
327 }, 286 },
328 } 287 }
329 </script> 288 </script>
330 289
331 <style lang="scss"> 290 <style lang="scss">
332 .content { 291 .content {
333 min-height: 100vh; 292 min-height: 100vh;
334 background-color: #f2f2f2; 293 background-color: #f2f2f2;
335 display: flex; 294 display: flex;
336 flex-direction: column; 295 flex-direction: column;
337 align-items: center; 296 align-items: center;
338 justify-content: space-between; 297 justify-content: space-between;
339 padding: 20rpx 40rpx; 298 padding: 20rpx 40rpx;
340 box-sizing: border-box; 299 box-sizing: border-box;
341 300
342 .partentCheck { 301 .partentCheck {
343 width: 16px; 302 width: 16px;
344 height: 16px; 303 height: 16px;
345 border-radius: 22px; 304 border-radius: 22px;
346 border: 1px solid #cfcfcf; 305 border: 1px solid #cfcfcf;
347 background-color: #ffffff; 306 background-color: #ffffff;
348 margin: 24rpx 12rpx 24rpx 24rpx; 307 margin: 24rpx 12rpx 24rpx 24rpx;
349 } 308 }
350 .partentChecked { 309 .partentChecked {
351 width: 18px; 310 width: 18px;
352 height: 18px; 311 height: 18px;
353 border-radius: 22px; 312 border-radius: 22px;
354 background-color: #ff6b4a; 313 background-color: #ff6b4a;
355 margin: 24rpx 12rpx 24rpx 24rpx; 314 margin: 24rpx 12rpx 24rpx 24rpx;
356 .correct { 315 .correct {
357 display: inline-block; 316 display: inline-block;
358 position: relative; 317 position: relative;
359 width: 10rpx; 318 width: 10rpx;
360 height: 2rpx; 319 height: 2rpx;
361 background: #ffffff; 320 background: #ffffff;
362 line-height: 0; 321 line-height: 0;
363 font-size: 0; 322 font-size: 0;
364 position: relative; 323 position: relative;
365 top: -7px; 324 top: -7px;
366 left: 4px; 325 left: 4px;
367 -webkit-transform: rotate(45deg); 326 -webkit-transform: rotate(45deg);
368 } 327 }
369 .correct:after { 328 .correct:after {
370 content: "/"; 329 content: "/";
371 display: block; 330 display: block;
372 width: 16rpx; 331 width: 16rpx;
373 height: 2rpx; 332 height: 2rpx;
374 background: #ffffff; 333 background: #ffffff;
375 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 334 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
376 } 335 }
377 } 336 }
378 337
379 .card { 338 .card {
380 background-color: #ffffff; 339 background-color: #ffffff;
381 border-radius: 16rpx; 340 border-radius: 16rpx;
382 box-sizing: border-box; 341 box-sizing: border-box;
383 padding: 36rpx 36rpx 36rpx 18rpx; 342 padding: 36rpx 36rpx 36rpx 18rpx;
384 display: flex; 343 display: flex;
385 flex-direction: column; 344 flex-direction: column;
386 align-items: center; 345 align-items: center;
387 justify-content: space-between; 346 justify-content: space-between;
388 margin-bottom: 180rpx; 347 margin-bottom: 180rpx;
389 .cardHeader { 348 .cardHeader {
390 width: 100%; 349 width: 100%;
391 height: 36rpx; 350 height: 36rpx;
392 display: flex; 351 display: flex;
393 align-items: center; 352 align-items: center;
394 justify-content: flex-start; 353 justify-content: flex-start;
395 margin-bottom: 20rpx; 354 margin-bottom: 20rpx;
396 image { 355 image {
397 height: 32rpx; 356 height: 32rpx;
398 width: 32rpx; 357 width: 32rpx;
399 padding-left: 6px; 358 padding-left: 6px;
400 padding-right: 10px; 359 padding-right: 10px;
401 } 360 }
402 text { 361 text {
403 // font-family: PingFangSC-Regular; 362 // font-family: PingFangSC-Regular;
404 font-size: 14px; 363 font-size: 14px;
405 color: #333333; 364 color: #333333;
406 letter-spacing: -0.26px; 365 letter-spacing: -0.26px;
407 } 366 }
408 } 367 }
409 .cardBody { 368 .cardBody {
410 width: 100%; 369 width: 100%;
411 min-height: 300rpx; 370 min-height: 300rpx;
412 display: flex; 371 display: flex;
413 align-items: center; 372 align-items: center;
414 justify-content: space-between; 373 justify-content: space-between;
415 .goodInfo { 374 .goodInfo {
416 width: 390rpx; 375 width: 390rpx;
417 display: flex; 376 display: flex;
418 flex-direction: row; 377 flex-direction: row;
419 justify-content: flex-start; 378 justify-content: flex-start;
420 padding-left: 6px; 379 padding-left: 6px;
421 380
422 .imageWrap { 381 .imageWrap {
423 height: 188rpx; 382 height: 188rpx;
424 width: 188rpx; 383 width: 188rpx;
425 margin-right: 28rpx; 384 margin-right: 28rpx;
426 385
427 image { 386 image {
428 border-radius: 4px; 387 border-radius: 4px;
429 height: 188rpx; 388 height: 188rpx;
430 width: 188rpx; 389 width: 188rpx;
431 } 390 }
432 } 391 }
433 .infoRight { 392 .infoRight {
434 display: flex; 393 display: flex;
435 flex-direction: column; 394 flex-direction: column;
436 align-items: flex-start; 395 align-items: flex-start;
437 justify-content: space-between; 396 justify-content: space-between;
438 min-height: 240rpx; 397 min-height: 240rpx;
439 width: 100%; 398 width: 100%;
440 .goodName { 399 .goodName {
441 display: -webkit-box; 400 display: -webkit-box;
442 -webkit-box-orient: vertical; 401 -webkit-box-orient: vertical;
443 -webkit-line-clamp: 2; 402 -webkit-line-clamp: 2;
444 text-align: justify; 403 text-align: justify;
445 overflow: hidden; 404 overflow: hidden;
446 font-size: 28rpx; 405 font-size: 28rpx;
447 color: #333333; 406 color: #333333;
448 } 407 }
449 .describ { 408 .describ {
450 width: 100%; 409 width: 100%;
451 min-height: 80rpx; 410 min-height: 80rpx;
452 background: #F9F9F9; 411 background: #F9F9F9;
453 border-radius: 2px; 412 border-radius: 2px;
454 box-sizing: border-box; 413 box-sizing: border-box;
455 padding: 10rpx; 414 padding: 10rpx;
456 font-size: 20rpx; 415 font-size: 20rpx;
457 letter-spacing: -0.23px; 416 letter-spacing: -0.23px;
458 color: #999999; 417 color: #999999;
459 display: flex; 418 display: flex;
460 justify-content: space-between; 419 justify-content: space-between;
461 align-items: center; 420 align-items: center;
462 .desL{ 421 .desL{
463 422
464 view{ 423 view{
465 margin: 10rpx 0 10rpx 0 ; 424 margin: 10rpx 0 10rpx 0 ;
466 } 425 }
467 } 426 }
468 427
469 } 428 }
470 .priceBox { 429 .priceBox {
471 display: flex; 430 display: flex;
472 justify-content: space-between; 431 justify-content: space-between;
473 align-items: center; 432 align-items: center;
474 // margin-top: 26px; 433 // margin-top: 26px;
475 width: 100%; 434 width: 100%;
476 font-size: 14px; 435 font-size: 14px;
477 color: #999999; 436 color: #999999;
478 .maxCount { 437 .maxCount {
479 color: #999999; 438 color: #999999;
480 font-size: 20rpx; 439 font-size: 20rpx;
481 } 440 }
482 .price { 441 .price {
483 color: #ff6b4a; 442 color: #ff6b4a;
484 font-size: 28rpx; 443 font-size: 28rpx;
485 } 444 }
486 .counter { 445 .counter {
487 display: flex; 446 display: flex;
488 flex-direction: row; 447 flex-direction: row;
489 justify-content: space-between; 448 justify-content: space-between;
490 align-items: center; 449 align-items: center;
491 font-size: 28rpx; 450 font-size: 28rpx;
492 color: #333333; 451 color: #333333;
493 width: 122rpx; 452 width: 122rpx;
494 .btn { 453 .btn {
495 display: flex; 454 display: flex;
496 justify-content: center; 455 justify-content: center;
497 line-height: 32rpx; 456 line-height: 32rpx;
498 height: 32rpx; 457 height: 32rpx;
499 width: 32rpx; 458 width: 32rpx;
500 background-color: #f2f2f2; 459 background-color: #f2f2f2;
501 color: #cfcfcf; 460 color: #cfcfcf;
502 } 461 }
503 } 462 }
504 } 463 }
505 } 464 }
506 } 465 }
507 } 466 }
508 } 467 }
509 .footer { 468 .footer {
510 position: fixed; 469 position: fixed;
511 left: 0; 470 left: 0;
512 bottom: 0px; 471 bottom: 0px;
513 height: 112rpx; 472 height: 112rpx;
514 width: 100%; 473 width: 100%;
515 background-color: #ffffff; 474 background-color: #ffffff;
516 font-size: 16px; 475 font-size: 16px;
517 display: flex; 476 display: flex;
518 justify-content: space-between; 477 justify-content: space-between;
519 align-items: center; 478 align-items: center;
520 .footerLeft { 479 .footerLeft {
521 display: flex; 480 display: flex;
522 justify-content: center; 481 justify-content: center;
523 align-items: center; 482 align-items: center;
524 width: 50%; 483 width: 50%;
525 color: #333333; 484 color: #333333;
526 text { 485 text {
527 color: #ff6b4a; 486 color: #ff6b4a;
528 } 487 }
529 } 488 }
530 .footerRight { 489 .footerRight {
531 display: flex; 490 display: flex;
src/pages/index/index.vue
Diff comments   View file @fe62536
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>{{loadedText}}</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 return 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 }, 167 },
163 categoryList() { 168 categoryList() {
164 return this.$store.state.index.categoryList; 169 return this.$store.state.index.categoryList;
165 } 170 }
166 }, 171 },
167 filters: { 172 filters: {
168 outData(value) { 173 outData(value) {
169 return JSON.stringify(value); 174 return JSON.stringify(value);
170 } 175 }
171 }, 176 },
172 /** 177 /**
173 * 页面载入完成后调用子组件的方法生成预加载效果 178 * 页面载入完成后调用子组件的方法生成预加载效果
174 */ 179 */
175 onReady:function(){ 180 onReady:function(){
176 this.getInitData() 181 this.getInitData()
177 }, 182 },
178 methods: { 183 methods: {
179 async getInitData (){ 184 async getInitData (){
180 this.showSkeleton = true; 185 this.showSkeleton = true;
181 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")]) 186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
182 this.showSkeleton = false; 187 this.showSkeleton = false;
183 this.showContent = true 188 this.showContent = true
184 }, 189 },
185 showDrawer(e) { 190 showDrawer(e) {
186 this.$refs[e].open(); 191 this.$refs[e].open();
187 }, 192 },
188 getList() { 193 getList() {
189 store.dispatch("index/list"); 194 store.dispatch("index/list");
190 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。 195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
191 //把data里的isLoading 改为false就可以了 196 //把data里的isLoading 改为false就可以了
192 }, 197 },
193 // search(params) { 198 // search(params) {
194 // this.$store.index. 199 // this.$store.index.
195 // }, 200 // },
196 closeDrawer(e) { 201 closeDrawer(e) {
197 this.$refs[e].close(); 202 this.$refs[e].close();
198 }, 203 },
199 change(e, type) { 204 change(e, type) {
200 this[type] = e; 205 this[type] = e;
201 }, 206 },
202 onClickItem(e) { 207 onClickItem(e) {
203 if (this.current !== e) { 208 if (this.current !== e) {
204 this.current = e; 209 this.current = e;
205 } 210 }
206 }, 211 },
207 dropDown() { 212 dropDown() {
208 console.log("下拉"); 213 console.log("下拉");
209 }, 214 },
210 searchKey(e) { 215 searchKey(e) {
211 const { value: keyword } = e.detail; 216 const { value: keyword } = e.detail;
212 this.keyWords = keyword; 217 this.keyWords = keyword;
213 store.dispatch("index/search", { 218 store.dispatch("index/search", {
214 params: {}, 219 params: {},
215 keyword 220 keyword
216 }); 221 });
217 }, 222 },
218 // 接收菜单结果 223 // 接收菜单结果
219 search(e) { 224 search(e) {
220 const { on, value, selectedData } = e; 225 const { on, value, selectedData } = e;
221 let params = {}; 226 let params = {};
222 const selectedPayload = {}; 227 const selectedPayload = {};
223 for (const key in selectedData) { 228 for (const key in selectedData) {
224 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
225 selectedPayload[key] = selectedData[key].toString(); 230 selectedPayload[key] = selectedData[key].toString();
226 } 231 }
227 } 232 }
228 if (on[0] === 1) { 233 if (on[0] === 1) {
229 // 若点击全部 234 // 若点击全部
230 this.searchText = ""; 235 this.searchText = "";
231 store.dispatch("index/list"); 236 store.dispatch("index/list");
232 } else { 237 } else {
233 for (let i = 1; i <= on.length; i++) { 238 for (let i = 1; i <= on.length; i++) {
234 // on[0]是全部 239 // on[0]是全部
235 if (on[i] === 1) { 240 if (on[i] === 1) {
236 // 若该选项被选中 241 // 若该选项被选中
237 if (this.categoryList[i].value === "filter") { 242 if (this.categoryList[i].value === "filter") {
238 params = { 243 params = {
239 ...selectedPayload, 244 ...selectedPayload,
240 ...params 245 ...params
241 }; 246 };
242 } else { 247 } else {
243 params[`${this.categoryList[i].value}`] = value[i][0]; 248 params[`${this.categoryList[i].value}`] = value[i][0];
244 } 249 }
245 } 250 }
246 } 251 }
247 store.dispatch("index/search", { 252 store.dispatch("index/search", {
248 params, 253 params,
249 keyword: this.keyWords 254 keyword: this.keyWords
250 }); 255 });
251 } 256 }
252 } 257 }
253 } 258 }
254 }; 259 };
255 </script> 260 </script>
256 261
257 <style lang="scss"> 262 <style lang="scss">
258 .content,.container { 263 .content,.container {
259 display: flex; 264 display: flex;
260 flex-direction: column; 265 flex-direction: column;
261 align-items: center; 266 align-items: center;
262 justify-content: center; 267 justify-content: center;
263 background-color: #f7f6f6;
264 } 268 }
265 .header { 269 .header {
266 display: flex; 270 display: flex;
267 flex-direction: column; 271 flex-direction: column;
268 align-items: center; 272 align-items: center;
269 justify-content: center; 273 justify-content: center;
270 background-color: #f7f6f6; 274 background-color: #f7f6f6;
271 height: 178rpx; 275 height: 178rpx;
272 width: 100%; 276 width: 100%;
273 z-index: 999; 277 z-index: 999;
274 position: fixed; 278 position: fixed;
275 top: 0; 279 top: 0;
276 left: 0; 280 left: 0;
277 } 281 }
278 .searchBar { 282 .searchBar {
279 width: 670rpx; 283 width: 670rpx;
280 display: flex; 284 display: flex;
281 justify-content: center; 285 justify-content: center;
282 align-items: center; 286 align-items: center;
283 box-sizing: border-box; 287 box-sizing: border-box;
284 padding: 0rpx 16rpx; 288 padding: 0rpx 16rpx;
285 border: 1px solid #ff6b4a; 289 border: 1px solid #ff6b4a;
286 border-radius: 8rpx; 290 border-radius: 8rpx;
287 background-color: #ffffff; 291 background-color: #ffffff;
288 } 292 }
289 293
290 .searchIpt { 294 .searchIpt {
291 height: 68rpx; 295 height: 68rpx;
292 width: 670rpx; 296 width: 670rpx;
293 padding: 16rpx; 297 padding: 16rpx;
294 font-size: 28rpx; 298 font-size: 28rpx;
295 box-sizing: border-box; 299 box-sizing: border-box;
296 } 300 }
297 .screenBar { 301 .screenBar {
298 width: 670rpx; 302 width: 670rpx;
299 height: 110rpx; 303 height: 110rpx;
300 display: flex; 304 display: flex;
301 flex-direction: row; 305 flex-direction: row;
302 justify-content: space-between; 306 justify-content: space-between;
303 align-items: center; 307 align-items: center;
304 color: #333333; 308 color: #333333;
305 font-size: 32rpx; 309 font-size: 32rpx;
306 } 310 }
307 .active { 311 .active {
308 color: #ff6b4a; 312 color: #ff6b4a;
309 } 313 }
310 .screenItem { 314 .screenItem {
311 display: flex; 315 display: flex;
312 justify-content: center; 316 justify-content: center;
313 align-items: center; 317 align-items: center;
314 } 318 }
315 .content-wrap { 319 .content-wrap {
316 width: 100%; 320 width: 100%;
317 background-color: #ffffff; 321 background-color: #ffffff;
318 } 322 }
319 323
320 .HMfilterDropdown { 324 .HMfilterDropdown {
321 top: 178rpx !important; 325 top: 178rpx !important;
322 } 326 }
323 327
324 .goods-list { 328 .goods-list {
325 padding-top: 286rpx; 329 padding-top: 286rpx;
326 .loading-text { 330 .loading-text {
327 width: 100%; 331 width: 100%;
328 display: flex; 332 display: flex;
329 justify-content: center; 333 justify-content: center;
330 align-items: center; 334 align-items: center;
331 height: 30px; 335 height: 30px;
332 color: #979797; 336 color: #979797;
333 font-size: 12px; 337 font-size: 12px;
334 } 338 }
335 .product-list { 339 .product-list {
336 width: 92%; 340 width: 92%;
337 padding: 0 4% 3vw 4%; 341 padding: 0 4% 3vw 4%;
338 display: flex; 342 display: flex;
339 justify-content: space-between; 343 justify-content: space-between;
340 flex-wrap: wrap; 344 flex-wrap: wrap;
341 .product { 345 .product {
342 width: 48%; 346 width: 48%;
343 min-height: 120rpx; 347 min-height: 120rpx;
344 margin: 0 0 20rpx 0; 348 margin: 0 0 20rpx 0;
345 background: #ffffff; 349 background: #ffffff;
346 border: 1px solid #f2f2f2; 350 border: 1px solid #f2f2f2;
347 } 351 }
348 } 352 }
349 } 353 }
350 </style> 354 </style>
src/store/modules/cart.js
Diff comments   View file @fe62536
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5
6 const state = { 6 const state = {
7 cartList: [], 7 cartList: [],
8 } 8 }
9 9
10 const mutations = { 10 const mutations = {
11 INIT: (state, cartList) => { 11 INIT: (state, cartList) => {
12 state.cartList = cartList 12 state.cartList = cartList
13 }, 13 },
14 DEL: (state, index) => { 14 DEL: (state, index) => {
15 console.log('mutations====>', state.cartList) 15 console.log('mutations====>', state.cartList)
16 state.cartList.splice(index, 1) 16 state.cartList.splice(index, 1)
17 console.log('mutations====>index', index) 17 console.log('mutations====>index', index)
18 // state.cartList=delList 18 // state.cartList=delList
19 }, 19 },
20 MODI: (state, args) => { 20 MODI: (state, args) => {
21 state.cartList[args.index].num = args.num 21 state.cartList[args.index].num = args.num
22 }, 22 },
23 23
24 } 24 }
25 25
26 const actions = { 26 const actions = {
27 // 获取购物车列表 27 // 获取购物车列表
28 getCartList({ commit }, param) { 28 getCartList({ commit }, param) {
29 return new Promise((resolve) => request({ 29 return new Promise((resolve) => request({
30 url: cartList, 30 url: cartList,
31 data: param, 31 data: param,
32 success: (res) => { 32 success: (res) => {
33 console.log('cart===>接口数据', res.data.data) 33 let test = {
34 isChecked: false,
35 itemNum:1,
36 price:0
37 }
34 commit('INIT', res.data.data) 38 commit('INIT', res.data.data)
35 resolve(res.data.data) 39 resolve(res.data.data)
36 }, 40 },
37 })) 41 }))
38 }, 42 },
39 // 修改购物车数量 43 // 修改购物车数量
40 modiCart({ commit }, param) { 44 modiCart({ commit }, param) {
41 const arg = Object.assign({ num: param.num }, param.args) 45 const arg = Object.assign({ num: param.num }, param.args)
42 delete param.args 46 delete param.args
43 return new Promise((resolve) => request({ 47 return new Promise((resolve) => request({
44 url: cartModi, 48 url: cartModi,
45 data: param, 49 data: param,
46 success: (res) => { 50 success: (res) => {
47 console.log('modi-parm', param) 51 console.log('modi-parm', param)
48 commit('MODI', arg) 52 commit('MODI', arg)
49 }, 53 },
50 fail: (res) => { 54 fail: (res) => {
51 console.log('fail status === > ', res) 55 console.log('fail status === > ', res)
52 }, 56 },
53 complete: (res) => { 57 complete: (res) => {
54 console.log('complete status === > ', res) 58 console.log('complete status === > ', res)
55 }, 59 },
56 })) 60 }))
57 }, 61 },
58 // 删除购物车商品 62 // 删除购物车商品
59 delCart({ commit }, param) { 63 delCart({ commit }, param) {
60 const arg = param.arg 64 const arg = param.arg
61 delete param.arg 65 delete param.arg
62 request({ 66 request({
63 url: cartDel, 67 url: cartDel,
64 data: param, 68 data: param,
65 success: (res) => { 69 success: (res) => {
66 console.log('del-parm', param) 70 console.log('del-parm', param)
67 console.log('del-myparms==>', arg) 71 console.log('del-myparms==>', arg)
68 commit('DEL', arg) 72 commit('DEL', arg)
69 }, 73 },
70 fail: (res) => { 74 fail: (res) => {
71 console.log('fail status === > ', res) 75 console.log('fail status === > ', res)
72 }, 76 },
73 complete: (res) => { 77 complete: (res) => {
74 console.log('complete status === > ', res) 78 console.log('complete status === > ', res)
75 }, 79 },
76 }) 80 })
77 }, 81 },
78 // 添加到购物车 82 // 添加到购物车
79 addCart({ commit }, param) { 83 addCart({ commit }, param) {
80 console.log('请求接口开始') 84 console.log('请求接口开始')
81 return new Promise((resolve) => request({ 85 return new Promise((resolve) => request({
82 url: cartAdd, 86 url: cartAdd,
83 data: param, 87 data: param,
84 success: (res) => { 88 success: (res) => {
85 console.log('add-parm', param) 89 console.log('add-parm', param)
86 console.log('addcart===>res.data===>', res.data) 90 console.log('addcart===>res.data===>', res.data)
87 // commit('INIT', res.data.data) 91 // commit('INIT', res.data.data)
88 resolve(res.data) 92 resolve(res.data)
89 }, 93 },
90 fail: (res) => { 94 fail: (res) => {
91 console.log('添加购物车失败 === > ', res) 95 console.log('添加购物车失败 === > ', res)
92 }, 96 },
93 complete: (res) => { 97 complete: (res) => {
94 console.log('添加购物车完成 === > ', res) 98 console.log('添加购物车完成 === > ', res)
95 }, 99 },
96 })) 100 }))
97 }, 101 },
98 } 102 }
99 103
100 export default { 104 export default {
101 namespaced: true, 105 namespaced: true,
102 state, 106 state,
103 mutations, 107 mutations,
104 actions, 108 actions,
105 } 109 }
106 110
src/store/modules/index.js
Diff comments   View file @fe62536
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 //初始化数据是为了显示默认骨架 363 //初始化数据是为了显示默认骨架
20 const state = { 364 const state = {
21 categoryList: [], 365 categoryList: [],
22 list: list 366 list: list
23 }; 367 };
24 368
25 const mutations = { 369 const mutations = {
26 LIST: (state, list) => { 370 LIST: (state, list) => {
27 state.list = list; 371 state.list = list;
28 }, 372 },
29 CATEGORY: (state, categoryList) => { 373 CATEGORY: (state, categoryList) => {
30 state.categoryList = categoryList; 374 state.categoryList = categoryList;
31 } 375 }
32 }; 376 };
33 377
34 const actions = { 378 const actions = {
35 category({ 379 category({
36 commit 380 commit
37 }, param) { 381 }, param) {
38 return new Promise((resolve) => request({ 382 return new Promise((resolve) => request({
39 url: category, 383 url: category,
40 success: (res) => { 384 success: (res) => {
41 let data = res.data.data; 385 let data = res.data.data;
42 for (let i = 0; i <= data.length; i++) { 386 for (let i = 0; i <= data.length; i++) {
43 if (data[i] && data[i].type !== 'filter') { 387 if (data[i] && data[i].type !== 'filter') {
44 data[i].type = 'hierarchy'; 388 data[i].type = 'hierarchy';
45 } 389 }
46 } 390 }
47 data.unshift({ 391 data.unshift({
48 type: "hierarchy", 392 type: "hierarchy",
49 name: "全部", 393 name: "全部",
50 value: "all", 394 value: "all",
51 isNoPull: true, 395 isNoPull: true,
52 }); 396 });
53 commit('CATEGORY', data); 397 commit('CATEGORY', data);
54 resolve(data) 398 resolve(data)
55 console.log('3333')
56 }, 399 },
57 fail: (res) => { 400 fail: (res) => {
58 console.log("fail status === > ", res); 401 console.log("fail status === > ", res);
59 } 402 }
60 })) 403 }))
61 404
62 }, 405 },
63 list({ 406 list({
64 commit 407 commit
65 }, param) { 408 }, param) {
66 return new Promise((resolve) => request({ 409 return new Promise((resolve) => request({
67 url: shopList, 410 url: shopList,
68 success: (res) => { 411 success: (res) => {
69 commit('LIST', res.data.data) 412 commit('LIST', res.data.data)
70 resolve(res.data) 413 resolve(res.data)
71 console.log('3333')
72 }, 414 },
73 fail: (res) => { 415 fail: (res) => {
74 console.log("fail status === > ", res); 416 console.log("fail status === > ", res);
75 }, 417 },
76 complete: (res) => { 418 complete: (res) => {
77 state.isLoading = false; 419 state.isLoading = false;
78 }, 420 },
79 })) 421 }))
80 }, 422 },
81 search({ 423 search({
82 commit 424 commit
83 }, { 425 }, {
84 params, 426 params,
85 keyword 427 keyword
86 }) { 428 }) {
87 const uid = uni.getStorageSync('uid'); 429 const uid = uni.getStorageSync('uid');
88 return new Promise((resolve) => request({ 430 return new Promise((resolve) => request({
89 url: search, 431 url: search,
90 data: { 432 data: {
91 params: JSON.stringify(params), 433 params: JSON.stringify(params),
92 uid, 434 uid,
93 way: 1, 435 way: 1,
94 keyword, 436 keyword,
95 }, 437 },
96 success: (res) => { 438 success: (res) => {
97 commit('LIST', res.data.data); 439 commit('LIST', res.data.data);
98 resolve(res.data) 440 resolve(res.data)
99 }, 441 },
100 fail: (res) => { 442 fail: (res) => {
101 console.log("fail status === > ", res); 443 console.log("fail status === > ", res);
102 } 444 }
103 })) 445 }))
104 446
105 }, 447 },
106 }; 448 };
107 449
108 export default { 450 export default {
109 namespaced: true, 451 namespaced: true,
110 state, 452 state,
111 mutations, 453 mutations,