Commit 2a95c67ccca24be413c6cdc6edf6f19a746069c5
1 parent
29c972fd52
Exists in
master
首页筛选以及分享修改
Showing
3 changed files
with
145 additions
and
118 deletions
Show diff stats
src/App.vue
| 1 | <script> | 1 | <script> |
| 2 | import Vue from 'vue'; | 2 | import Vue from 'vue' |
| 3 | import store from '@/store'; | 3 | import store from '@/store' |
| 4 | 4 | ||
| 5 | export default Vue.extend({ | 5 | export default Vue.extend({ |
| 6 | mpType: 'app', | 6 | mpType: 'app', |
| 7 | onLaunch(options) { | 7 | onLaunch(options) { |
| 8 | const option = options || {}; | 8 | console.log('options', options) |
| 9 | // 获取用户来源 | 9 | const option = options || {} |
| 10 | // console.log('软件启动，输出转来的参数:', option); | 10 | // 获取用户来源 |
| 11 | // console.log('场景值------------------:', option.scene); | 11 | // console.log('软件启动，输出转来的参数:', option); |
| 12 | let loginQueryInfo = option ? option.query : {}; | 12 | // console.log('场景值------------------:', option.scene); |
| 13 | loginQueryInfo = loginQueryInfo || {}; | 13 | let loginQueryInfo = option ? option.query : {} |
| 14 | // console.log('loginQueryInfo onShow===>', loginQueryInfo); | 14 | loginQueryInfo = loginQueryInfo || {} |
| 15 | const scene = decodeURIComponent(loginQueryInfo.scene); | 15 | // console.log('loginQueryInfo onShow===>', loginQueryInfo); |
| 16 | // console.log('decodeURIComponent scense====>', scene); | 16 | const scene = decodeURIComponent(loginQueryInfo.scene) |
| 17 | let fromInfo = {}; | 17 | // console.log('decodeURIComponent scense====>', scene); |
| 18 | let fromInfo = {} | ||
| 19 | const getQueryString = { | ||
| 20 | uid: undefined, | ||
| 21 | sid: undefined, | ||
| 22 | pid: undefined, | ||
| 23 | } | ||
| 18 | 24 | ||
| 19 | if(scene.length > 0 ) { | 25 | if (scene.length > 0) { |
| 20 | const getQueryString = { | 26 | const strB = unescape(scene).split('&') |
| 21 | uid: undefined, | ||
| 22 | sid: undefined, | ||
| 23 | pid: undefined | ||
| 24 | }; | ||
| 25 | const strB = scene.split('&'); | ||
| 26 | 27 | ||
| 27 | for(let i = 0; i < strB.length; i += 1) { | 28 | for (let i = 0; i < strB.length; i += 1) { |
| 28 | getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]); | 29 | getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]) |
| 29 | } | 30 | } |
| 30 | fromInfo = { | 31 | fromInfo = { |
| 31 | loginQueryInfo, | 32 | loginQueryInfo, |
| 32 | fromuid: getQueryString.uid, | 33 | fromuid: getQueryString.uid, |
| 33 | fromsid: getQueryString.sid, | 34 | fromsid: getQueryString.sid, |
| 34 | frompid: getQueryString.pid, | 35 | frompid: getQueryString.pid, |
| 35 | scene: option.scene, | 36 | scene: option.scene, |
| 36 | } | 37 | } |
| 37 | store.dispatch('user/setFrom', fromInfo); | 38 | store.dispatch('user/setFrom', fromInfo) |
| 38 | // console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); | 39 | // console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString); |
| 39 | } else { | 40 | } else { |
| 40 | // console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); | 41 | // console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo); |
| 41 | if (loginQueryInfo.hasOwnProperty('sid') == false) { | 42 | if (loginQueryInfo.hasOwnProperty('sid') === false) { |
| 42 | loginQueryInfo.sid = 0; | 43 | loginQueryInfo.sid = 0 |
| 43 | } | 44 | } |
| 44 | if (loginQueryInfo.hasOwnProperty('pid') == false) { | 45 | if (loginQueryInfo.hasOwnProperty('pid') === false) { |
| 45 | loginQueryInfo.pid = 0; | 46 | loginQueryInfo.pid = 0 |
| 46 | } | 47 | } |
| 47 | if (loginQueryInfo.hasOwnProperty('uid') == false) { | 48 | if (loginQueryInfo.hasOwnProperty('uid') === false) { |
| 48 | loginQueryInfo.uid = 0; | 49 | loginQueryInfo.uid = 0 |
| 49 | } | 50 | } |
| 50 | fromInfo = { | 51 | fromInfo = { |
| 51 | loginQueryInfo, | 52 | loginQueryInfo, |
| 52 | fromuid: loginQueryInfo.uid, | 53 | fromuid: loginQueryInfo.uid, |
| 53 | fromsid: loginQueryInfo.sid, | 54 | fromsid: loginQueryInfo.sid, |
| 54 | frompid: loginQueryInfo.pid, | 55 | frompid: loginQueryInfo.pid, |
| 55 | scene: option.scene, | 56 | scene: option.scene, |
| 56 | } | 57 | } |
| 57 | store.dispatch('user/setFrom', fromInfo) | 58 | store.dispatch('user/setFrom', fromInfo) |
| 58 | } | 59 | } |
| 59 | 60 | ||
| 60 | // 登陆 | 61 | // 登陆 |
| 61 | const openId = uni.getStorageSync('openid') || ""; | 62 | const openId = uni.getStorageSync('openid') || '' |
| 62 | if(openId.length <= 10) { | 63 | if (openId.length <= 10) { |
| 63 | uni.clearStorageSync() | 64 | uni.clearStorageSync() |
| 64 | store.dispatch("user/login", fromInfo); | 65 | store.dispatch('user/login', fromInfo) |
| 65 | } else { | 66 | } else { |
| 66 | store.dispatch("user/getUserInfo", fromInfo); | 67 | store.dispatch('user/getUserInfo', fromInfo) |
| 67 | } | 68 | } |
| 68 | }, | 69 | if (getQueryString.pid) { |
| 69 | onShow() { | 70 | uni.navigateTo({ |
| 70 | // console.log('App Show') | 71 | url: `/pages/details/details?pid=${getQueryString.pid}`, |
| 71 | }, | 72 | success: res => {}, |
| 72 | onHide() { | 73 | fail: () => {}, |
| 73 | // console.log('App Hide') | 74 | complete: () => {}, |
| 74 | }, | 75 | }) |
| 75 | methods: { | 76 | } |
| 76 | } | 77 | }, |
| 77 | }); | 78 | onShow() { |
| 79 | // console.log('App Show') | ||
| 80 | }, | ||
| 81 | onHide() { | ||
| 82 | // console.log('App Hide') | ||
| 83 | }, | ||
| 84 | methods: { | ||
| 85 | }, | ||
| 86 | }) | ||
| 78 | </script> | 87 | </script> |
src/components/HMFilterDropdown/HMFilterDropdown.vue
| 1 | <template> | 1 | <template> |
| 2 | <view | 2 | <view |
| 3 | class="HMfilterDropdown" | 3 | class="HMfilterDropdown" |
| 4 | @touchmove.stop.prevent="discard" | 4 | @touchmove.stop.prevent="discard" |
| 5 | @tap.stop="discard" | 5 | @tap.stop="discard" |
| 6 | > | 6 | > |
| 7 | <view class="nav"> | 7 | <view class="nav"> |
| 8 | <block | 8 | <block |
| 9 | v-for="(item,index) in menu" | 9 | v-for="(item,index) in menu" |
| 10 | :key="index" | 10 | :key="index" |
| 11 | > | 11 | > |
| 12 | <view | 12 | <view |
| 13 | class="first-menu" | 13 | class="first-menu" |
| 14 | :class="{'on':showPage==index || on[index] === 1}" | 14 | :class="{'on':showPage==index || on[index] === 1}" |
| 15 | @tap="togglePage(index, false)" | 15 | @tap="togglePage(index, false)" |
| 16 | v-if="!item.isNoPull" | 16 | v-if="!item.isNoPull" |
| 17 | > | 17 | > |
| 18 | <text class="name">{{item.name}}</text> | 18 | <text class="name">{{item.name}}</text> |
| 19 | <text | 19 | <text |
| 20 | class="iconfont triangle" | 20 | class="iconfont triangle" |
| 21 | :style="'transform:rotate('+triangleDeg[index]+'deg);'" | 21 | :style="'transform:rotate('+triangleDeg[index]+'deg);'" |
| 22 | ></text> | 22 | ></text> |
| 23 | </view> | 23 | </view> |
| 24 | <view | 24 | <view |
| 25 | class="first-menu" | 25 | class="first-menu" |
| 26 | :class="{'on':showPage==index || on[index] === 1}" | 26 | :class="{'on':showPage==index || on[index] === 1}" |
| 27 | @tap="showAll()" | 27 | @tap="showAll()" |
| 28 | v-else | 28 | v-else |
| 29 | > | 29 | > |
| 30 | <text class="name">{{item.name}}</text> | 30 | <text class="name">{{item.name}}</text> |
| 31 | </view> | 31 | </view> |
| 32 | </block> | 32 | </block> |
| 33 | </view> | 33 | </view> |
| 34 | <view | 34 | <view |
| 35 | class="mask" | 35 | class="mask" |
| 36 | :class="{'show':isShowMask,'hide':maskVisibility!=true}" | 36 | :class="{'show':isShowMask,'hide':maskVisibility!=true}" |
| 37 | @tap="togglePage(showPage)" | 37 | @tap="togglePage(showPage)" |
| 38 | ></view> | 38 | ></view> |
| 39 | <block | 39 | <block |
| 40 | v-for="(page,page_index) in subData" | 40 | v-for="(page,page_index) in subData" |
| 41 | :key="page_index" | 41 | :key="page_index" |
| 42 | > | 42 | > |
| 43 | <view | 43 | <view |
| 44 | class="sub-menu-class" | 44 | class="sub-menu-class" |
| 45 | :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}" | 45 | :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}" |
| 46 | > | 46 | > |
| 47 | <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> | 47 | <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> |
| 48 | <scroll-view | 48 | <scroll-view |
| 49 | class="sub-menu-list" | 49 | class="sub-menu-list" |
| 50 | :class="[activeMenuArr[page_index].length>1?'first':'alone']" | 50 | :class="[activeMenuArr[page_index].length>1?'first':'alone']" |
| 51 | :scroll-y="true" | 51 | :scroll-y="true" |
| 52 | :scroll-into-view="'first_id'+firstScrollInto" | 52 | :scroll-into-view="'first_id'+firstScrollInto" |
| 53 | > | 53 | > |
| 54 | <block | 54 | <block |
| 55 | v-for="(sub,index) in page.submenu" | 55 | v-for="(sub,index) in page.submenu" |
| 56 | :key="index" | 56 | :key="index" |
| 57 | > | 57 | > |
| 58 | <view | 58 | <view |
| 59 | class="sub-menu" | 59 | class="sub-menu" |
| 60 | :id="'first_id'+index" | 60 | :id="'first_id'+index" |
| 61 | :class="{'on':activeMenuArr[page_index][0]==index}" | 61 | :class="{'on':activeMenuArr[page_index][0]==index}" |
| 62 | @tap="selectHierarchyMenu(page_index,index,null,null)" | 62 | @tap="selectHierarchyMenu(page_index,index,null,null)" |
| 63 | > | 63 | > |
| 64 | <view class="menu-name"> | 64 | <view class="menu-name"> |
| 65 | <text>{{sub.name}}</text> | 65 | <text>{{sub.name}}</text> |
| 66 | <text class="iconfont selected"></text> | 66 | <text class="iconfont selected"></text> |
| 67 | </view> | 67 | </view> |
| 68 | </view> | 68 | </view> |
| 69 | </block> | 69 | </block> |
| 70 | </scroll-view> | 70 | </scroll-view> |
| 71 | <block | 71 | <block |
| 72 | v-for="(sub,index) in page.submenu" | 72 | v-for="(sub,index) in page.submenu" |
| 73 | :key="index" | 73 | :key="index" |
| 74 | > | 74 | > |
| 75 | <scroll-view | 75 | <scroll-view |
| 76 | class="sub-menu-list not-first" | 76 | class="sub-menu-list not-first" |
| 77 | :scroll-y="true" | 77 | :scroll-y="true" |
| 78 | v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" | 78 | v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" |
| 79 | :scroll-into-view="'second_id'+secondScrollInto" | 79 | :scroll-into-view="'second_id'+secondScrollInto" |
| 80 | > | 80 | > |
| 81 | <block | 81 | <block |
| 82 | v-for="(sub_second,second_index) in sub.submenu" | 82 | v-for="(sub_second,second_index) in sub.submenu" |
| 83 | :key="second_index" | 83 | :key="second_index" |
| 84 | > | 84 | > |
| 85 | <view | 85 | <view |
| 86 | class="sub-menu" | 86 | class="sub-menu" |
| 87 | :id="'second_id'+second_index" | 87 | :id="'second_id'+second_index" |
| 88 | :class="{'on':activeMenuArr[page_index][1]==second_index}" | 88 | :class="{'on':activeMenuArr[page_index][1]==second_index}" |
| 89 | > | 89 | > |
| 90 | <view | 90 | <view |
| 91 | class="menu-name" | 91 | class="menu-name" |
| 92 | @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)" | 92 | @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)" |
| 93 | > | 93 | > |
| 94 | <text>{{sub_second.name}}</text> | 94 | <text>{{sub_second.name}}</text> |
| 95 | <text class="iconfont selected"></text> | 95 | <text class="iconfont selected"></text> |
| 96 | </view> | 96 | </view> |
| 97 | <view | 97 | <view |
| 98 | class="more-sub-menu" | 98 | class="more-sub-menu" |
| 99 | v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0" | 99 | v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0" |
| 100 | > | 100 | > |
| 101 | <block | 101 | <block |
| 102 | v-for="(sub2,sub2_index) in sub_second.submenu" | 102 | v-for="(sub2,sub2_index) in sub_second.submenu" |
| 103 | :key="sub2_index" | 103 | :key="sub2_index" |
| 104 | > | 104 | > |
| 105 | <text | 105 | <text |
| 106 | v-if="sub_second.showAllSub || (sub2_index<8)" | 106 | v-if="sub_second.showAllSub || (sub2_index<8)" |
| 107 | :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" | 107 | :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" |
| 108 | @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)" | 108 | @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)" |
| 109 | >{{sub2.name}}</text> | 109 | >{{sub2.name}}</text> |
| 110 | <text | 110 | <text |
| 111 | v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" | 111 | v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" |
| 112 | @tap="showMoreSub(second_index)" | 112 | @tap="showMoreSub(second_index)" |
| 113 | >更多<text class="iconfont triangle"></text></text> | 113 | >更多<text class="iconfont triangle"></text></text> |
| 114 | </block> | 114 | </block> |
| 115 | </view> | 115 | </view> |
| 116 | </view> | 116 | </view> |
| 117 | </block> | 117 | </block> |
| 118 | </scroll-view> | 118 | </scroll-view> |
| 119 | </block> | 119 | </block> |
| 120 | </block> | 120 | </block> |
| 121 | <block v-if="page.type=='filter' || page.type=='checkbox'"> | 121 | <block v-if="page.type=='filter' || page.type=='checkbox'"> |
| 122 | <view class="filter"> | 122 | <view class="filter"> |
| 123 | <scroll-view | 123 | <scroll-view |
| 124 | class="menu-box" | 124 | class="menu-box" |
| 125 | :scroll-y="true" | 125 | :scroll-y="true" |
| 126 | > | 126 | > |
| 127 | <view | 127 | <view |
| 128 | class="box" | 128 | class="box" |
| 129 | v-for="(box,box_index) in page.submenu" | 129 | v-for="(box,box_index) in page.submenu" |
| 130 | :key="box_index" | 130 | :key="box_index" |
| 131 | > | 131 | > |
| 132 | <view class="title">{{box.name}}</view> | 132 | <view class="title">{{box.name}}</view> |
| 133 | <view class="labels"> | 133 | <view class="labels"> |
| 134 | <view | 134 | <view |
| 135 | v-for="(label,label_index) in box.submenu" | 135 | v-for="(label,label_index) in box.submenu" |
| 136 | :key="label_index" | 136 | :key="label_index" |
| 137 | @tap="selectFilterLabel(page_index, box_index, label_index)" | 137 | @tap="selectFilterLabel(page_index, box_index, label_index)" |
| 138 | :class="{'on': label.selected}" | 138 | :class="{'on': label.selected}" |
| 139 | >{{label.name}}</view> | 139 | >{{label.name}}</view> |
| 140 | </view> | 140 | </view> |
| 141 | </view> | 141 | </view> |
| 142 | </scroll-view> | 142 | </scroll-view> |
| 143 | <view class="btn-box"> | 143 | <view class="btn-box"> |
| 144 | <view | 144 | <view |
| 145 | class="reset" | 145 | class="reset" |
| 146 | @tap="resetFilterData(page_index)" | 146 | @tap="resetFilterData(page_index)" |
| 147 | >重置</view> | 147 | >重置</view> |
| 148 | <view | 148 | <view |
| 149 | class="submit" | 149 | class="submit" |
| 150 | @tap="setFilterData(page_index)" | 150 | @tap="setFilterData(page_index)" |
| 151 | >确定</view> | 151 | >确定</view> |
| 152 | </view> | 152 | </view> |
| 153 | </view> | 153 | </view> |
| 154 | </block> | 154 | </block> |
| 155 | <block v-if="page.type=='radio'"> | 155 | <block v-if="page.type=='radio'"> |
| 156 | <view class="filter"> | 156 | <view class="filter"> |
| 157 | <scroll-view | 157 | <scroll-view |
| 158 | class="menu-box" | 158 | class="menu-box" |
| 159 | :scroll-y="true" | 159 | :scroll-y="true" |
| 160 | > | 160 | > |
| 161 | <view | 161 | <view |
| 162 | class="box" | 162 | class="box" |
| 163 | v-for="(box,box_index) in page.submenu" | 163 | v-for="(box,box_index) in page.submenu" |
| 164 | :key="box_index" | 164 | :key="box_index" |
| 165 | > | 165 | > |
| 166 | <view class="title">{{box.name}}</view> | 166 | <view class="title">{{box.name}}</view> |
| 167 | <view class="labels"> | 167 | <view class="labels"> |
| 168 | <view | 168 | <view |
| 169 | v-for="(label,label_index) in box.submenu" | 169 | v-for="(label,label_index) in box.submenu" |
| 170 | :key="label_index" | 170 | :key="label_index" |
| 171 | @tap="selectRadioLabel(page_index,box_index,label_index)" | 171 | @tap="selectRadioLabel(page_index,box_index,label_index)" |
| 172 | :class="{'on':label.selected}" | 172 | :class="{'on':label.selected}" |
| 173 | >{{label.name}}</view> | 173 | >{{label.name}}</view> |
| 174 | </view> | 174 | </view> |
| 175 | </view> | 175 | </view> |
| 176 | </scroll-view> | 176 | </scroll-view> |
| 177 | <view class="btn-box"> | 177 | <view class="btn-box"> |
| 178 | <view | 178 | <view |
| 179 | class="reset" | 179 | class="reset" |
| 180 | @tap="resetFilterData(page_index)" | 180 | @tap="resetFilterData(page_index)" |
| 181 | >重置</view> | 181 | >重置</view> |
| 182 | <view | 182 | <view |
| 183 | class="submit" | 183 | class="submit" |
| 184 | @tap="setFilterData(page_index)" | 184 | @tap="setFilterData(page_index)" |
| 185 | >确定</view> | 185 | >确定</view> |
| 186 | </view> | 186 | </view> |
| 187 | </view> | 187 | </view> |
| 188 | </block> | 188 | </block> |
| 189 | </view> | 189 | </view> |
| 190 | </block> | 190 | </block> |
| 191 | </view> | 191 | </view> |
| 192 | </template> | 192 | </template> |
| 193 | <script> | 193 | <script> |
| 194 | export default { | 194 | export default { |
| 195 | data () { | 195 | data () { |
| 196 | return { | 196 | return { |
| 197 | subData: [], // 菜单数据 | 197 | subData: [], // 菜单数据 |
| 198 | menu: [], // 顶部横条数据 | 198 | menu: [], // 顶部横条数据 |
| 199 | showPage: -1, // 菜单页面显示/隐藏动画控制 | 199 | showPage: -1, // 菜单页面显示/隐藏动画控制 |
| 200 | pageState: [], // 页面的状态 | 200 | pageState: [], // 页面的状态 |
| 201 | activeMenuArr: [], // UI状态 | 201 | activeMenuArr: [], // UI状态 |
| 202 | shadowActiveMenuArr: [], // 记录选中 | 202 | shadowActiveMenuArr: [], // 记录选中 |
| 203 | defaultActive: [], | 203 | defaultActive: [], |
| 204 | triangleDeg: [], // 小三角形的翻转动画控制 | 204 | triangleDeg: [], // 小三角形的翻转动画控制 |
| 205 | isShowMask: false, // 遮罩层显示/隐藏动画控制 | 205 | isShowMask: false, // 遮罩层显示/隐藏动画控制 |
| 206 | maskVisibility: false, // 遮罩层显示/隐藏状态 | 206 | maskVisibility: false, // 遮罩层显示/隐藏状态 |
| 207 | // 滚动区域定位 | 207 | // 滚动区域定位 |
| 208 | firstScrollInto: 0, | 208 | firstScrollInto: 0, |
| 209 | secondScrollInto: 0, | 209 | secondScrollInto: 0, |
| 210 | componentTop: 0, // 组件top | 210 | componentTop: 0, // 组件top |
| 211 | isReadNewSelect: false, | 211 | isReadNewSelect: false, |
| 212 | on: [1, 0, 0, 0, 0], | 212 | on: [1, 0, 0, 0, 0], |
| 213 | selectedData: {} | 213 | selectedData: {}, |
| 214 | } | 214 | } |
| 215 | }, | 215 | }, |
| 216 | props: { | 216 | props: { |
| 217 | filterData: { | 217 | filterData: { |
| 218 | value: Array, | 218 | value: Array, |
| 219 | default: [] | 219 | default: [], |
| 220 | }, | 220 | }, |
| 221 | defaultSelected: { | 221 | defaultSelected: { |
| 222 | value: Array, | 222 | value: Array, |
| 223 | default: [] | 223 | default: [], |
| 224 | }, | 224 | }, |
| 225 | updateMenuName: { | 225 | updateMenuName: { |
| 226 | value: Boolean, | 226 | value: Boolean, |
| 227 | default: true | 227 | default: true, |
| 228 | }, | 228 | }, |
| 229 | dataFormat: { | 229 | dataFormat: { |
| 230 | value: String, | 230 | value: String, |
| 231 | default: 'Array' | 231 | default: 'Array', |
| 232 | } | 232 | }, |
| 233 | }, | 233 | }, |
| 234 | watch: { | 234 | watch: { |
| 235 | filterData: { | 235 | filterData: { |
| 236 | handler () { | 236 | handler () { |
| 237 | this.initMenu() // filterData重新赋值初始化菜单 | 237 | this.initMenu() // filterData重新赋值初始化菜单 |
| 238 | }, | 238 | }, |
| 239 | immediate: true | 239 | immediate: true, |
| 240 | }, | 240 | }, |
| 241 | defaultSelected (newVal) { | 241 | defaultSelected (newVal) { |
| 242 | if (newVal.length === 0) { | 242 | if (newVal.length === 0) { |
| 243 | return | 243 | return |
| 244 | } | 244 | } |
| 245 | this.defaultActive = JSON.parse(JSON.stringify(newVal)) | 245 | this.defaultActive = JSON.parse(JSON.stringify(newVal)) |
| 246 | this.activeMenuArr = JSON.parse(JSON.stringify(newVal)) | 246 | this.activeMenuArr = JSON.parse(JSON.stringify(newVal)) |
| 247 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)) | 247 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)) |
| 248 | } | 248 | }, |
| 249 | }, | 249 | }, |
| 250 | methods: { | 250 | methods: { |
| 251 | initMenu () { | 251 | initMenu () { |
| 252 | let tmpMenuActiveArr = [] | 252 | let tmpMenuActiveArr = [] |
| 253 | const tmpMenu = [] | 253 | const tmpMenu = [] |
| 254 | for (let i = 0; i < this.filterData.length; i++) { | 254 | for (let i = 0; i < this.filterData.length; i++) { |
| 255 | let tmpitem = this.filterData[i] | 255 | let tmpitem = this.filterData[i] |
| 256 | tmpMenu.push({ | 256 | tmpMenu.push({ |
| 257 | // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name | 257 | // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name |
| 258 | name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name), | 258 | name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name), |
| 259 | type: tmpitem.type, | 259 | type: tmpitem.type, |
| 260 | isNoPull: tmpitem.isNoPull | 260 | isNoPull: tmpitem.isNoPull, |
| 261 | }) | 261 | }) |
| 262 | // 初始化选中项数组-ui状态 | 262 | // 初始化选中项数组-ui状态 |
| 263 | tmpMenuActiveArr.push(this.processActive(tmpitem)) | 263 | tmpMenuActiveArr.push(this.processActive(tmpitem)) |
| 264 | // 初始化角度数组 | 264 | // 初始化角度数组 |
| 265 | this.triangleDeg.push(0) | 265 | this.triangleDeg.push(0) |
| 266 | // 初始化控制显示状态数组 | 266 | // 初始化控制显示状态数组 |
| 267 | this.pageState.push(false) | 267 | this.pageState.push(false) |
| 268 | // 递归处理子菜单数据 | 268 | // 递归处理子菜单数据 |
| 269 | tmpitem = this.processSubMenu(tmpitem) | 269 | tmpitem = this.processSubMenu(tmpitem) |
| 270 | this.filterData[i] = tmpitem | 270 | this.filterData[i] = tmpitem |
| 271 | if (tmpitem.type === 'filter') { | 271 | if (tmpitem.type === 'filter') { |
| 272 | for (let i = 0; i < tmpitem.length; i++) { | 272 | for (let i = 0; i < tmpitem.length; i++) { |
| 273 | this.selectedData[`${tmpitem.submenu[i].value}`] = [] | 273 | this.selectedData[`${tmpitem.submenu[i].value}`] = [] |
| 274 | } | 274 | } |
| 275 | } | 275 | } |
| 276 | } | 276 | } |
| 277 | console.log('this.selectedData', this.selectedData) | 277 | console.log('this.selectedData', this.selectedData) |
| 278 | this.menu = tmpMenu | 278 | this.menu = tmpMenu |
| 279 | // 初始化选中项数组 | 279 | // 初始化选中项数组 |
| 280 | tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr | 280 | tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr |
| 281 | this.defaultActive = [] | 281 | this.defaultActive = [] |
| 282 | this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) | 282 | this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) |
| 283 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) | 283 | this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) |
| 284 | // 加载菜单数据 | 284 | // 加载菜单数据 |
| 285 | this.subData = this.filterData | 285 | this.subData = this.filterData |
| 286 | }, | 286 | }, |
| 287 | // 展开更多 | 287 | // 展开更多 |
| 288 | showMoreSub (index) { | 288 | showMoreSub (index) { |
| 289 | this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true | 289 | this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true |
| 290 | this.$forceUpdate() | 290 | this.$forceUpdate() |
| 291 | }, | 291 | }, |
| 292 | // 选中 | 292 | // 选中 |
| 293 | selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) { | 293 | selectHierarchyMenu (pageIndex, level1Index, level2Index, level3Index) { |
| 294 | // 读取记录 | 294 | // 读取记录 |
| 295 | if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) { | 295 | if (level1Index != null && level2Index == null && level3Index == null && this.shadowActiveMenuArr[pageIndex][0] === level1Index) { |
| 296 | this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))) | 296 | this.activeMenuArr.splice(pageIndex, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[pageIndex]))) |
| 297 | } else { | 297 | } else { |
| 298 | this.activeMenuArr[page_index].splice(0, 1, level1_index); | 298 | this.activeMenuArr[pageIndex].splice(0, 1, level1Index); |
| 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 | (level2Index != null || this.activeMenuArr[pageIndex].length >= 2) && (this.activeMenuArr[pageIndex].splice(1, 1, level2Index) || this.activeMenuArr[pageIndex].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 | (level3Index != null || this.activeMenuArr[pageIndex].length >= 3) && (this.activeMenuArr[pageIndex].splice(2, 1, level3Index) || this.activeMenuArr[pageIndex].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 (level3Index != null || level2Index != null || (level1Index != null && this.subData[pageIndex].submenu[level1Index].submenu.length === 0) |
| 304 | ) { | 304 | ) { |
| 305 | const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index] | 305 | // const sub = this.subData[pageIndex].submenu[level1Index].submenu[level2Index] |
| 306 | this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) | 306 | this.shadowActiveMenuArr[pageIndex] = JSON.parse(JSON.stringify(this.activeMenuArr[pageIndex])) |
| 307 | this.togglePage(this.showPage) | 307 | this.togglePage(this.showPage) |
| 308 | } | 308 | } |
| 309 | }, | 309 | }, |
| 310 | // 写入结果，筛选 | 310 | // 写入结果，筛选 |
| 311 | setFilterData (page_index) { | 311 | setFilterData (pageIndex) { |
| 312 | this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) | 312 | this.shadowActiveMenuArr[pageIndex] = JSON.parse(JSON.stringify(this.activeMenuArr[pageIndex])) |
| 313 | this.togglePage(this.showPage) | 313 | this.togglePage(this.showPage) |
| 314 | }, | 314 | }, |
| 315 | // 重置结果和ui，筛选 | 315 | // 重置结果和ui，筛选 |
| 316 | resetFilterData (page_index) { | 316 | resetFilterData (pageIndex) { |
| 317 | const tmpArr = [] | 317 | const tmpArr = [] |
| 318 | let level = this.shadowActiveMenuArr[page_index].length | 318 | let level = this.shadowActiveMenuArr[pageIndex].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[pageIndex].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[pageIndex].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[pageIndex] = JSON.parse(JSON.stringify(tmpArr)) |
| 328 | this.$forceUpdate() | 328 | this.$forceUpdate() |
| 329 | }, | 329 | }, |
| 330 | // 选中筛选类label-UI状态 | 330 | // 选中筛选类label-UI状态 |
| 331 | selectFilterLabel (page_index, box_index, label_index) { | 331 | selectFilterLabel (page_index, box_index, label_index) { |
| 332 | const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index) | 332 | const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index) |
| 333 | const data = this.filterData[page_index].submenu | 333 | const data = this.filterData[page_index].submenu |
| 334 | const selected = this.selectedData[`${data[box_index].value}`] | 334 | const selected = this.selectedData[`${data[box_index].value}`] |
| 335 | if (findIndex > -1) { | 335 | if (findIndex > -1) { |
| 336 | this.activeMenuArr[page_index][box_index].splice(findIndex, 1) | 336 | this.activeMenuArr[page_index][box_index].splice(findIndex, 1) |
| 337 | this.subData[page_index].submenu[box_index].submenu[label_index].selected = false | 337 | this.subData[page_index].submenu[box_index].submenu[label_index].selected = false |
| 338 | for (let i = 0; i < selected.length; i++) { | 338 | for (let i = 0; i < selected.length; i++) { |
| 339 | if (selected[i] === data[box_index].submenu[label_index].value) { | 339 | if (selected[i] === data[box_index].submenu[label_index].value) { |
| 340 | selected.splice(i, 1) | 340 | selected.splice(i, 1) |
| 341 | this.selectedData[`${data[box_index].value}`] = selected | 341 | this.selectedData[`${data[box_index].value}`] = selected |
| 342 | } | 342 | } |
| 343 | } | 343 | } |
| 344 | } else { | 344 | } else { |
| 345 | this.activeMenuArr[page_index][box_index].push(label_index) | 345 | this.activeMenuArr[page_index][box_index].push(label_index) |
| 346 | this.subData[page_index].submenu[box_index].submenu[label_index].selected = true | 346 | this.subData[page_index].submenu[box_index].submenu[label_index].selected = true |
| 347 | if (!selected) { | 347 | if (!selected) { |
| 348 | this.selectedData[`${data[box_index].value}`] = [] | 348 | this.selectedData[`${data[box_index].value}`] = [] |
| 349 | this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) | 349 | this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) |
| 350 | } else { | 350 | } else { |
| 351 | console.log('---', data, this.filterData, this.selectedData) | 351 | console.log('---', data, this.filterData, this.selectedData) |
| 352 | this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) | 352 | this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) |
| 353 | } | 353 | } |
| 354 | // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index]) | 354 | // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index]) |
| 355 | } | 355 | } |
| 356 | this.$forceUpdate() | 356 | this.$forceUpdate() |
| 357 | }, | 357 | }, |
| 358 | // 选中单选类label-UI状态 | 358 | // 选中单选类label-UI状态 |
| 359 | selectRadioLabel (pageIndex, boxIndex, labelIndex) { | 359 | selectRadioLabel (pageIndex, boxIndex, labelIndex) { |
| 360 | const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0] | 360 | const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0] |
| 361 | if (activeIndex === labelIndex) { | 361 | if (activeIndex === labelIndex) { |
| 362 | this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false | 362 | this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false |
| 363 | this.activeMenuArr[pageIndex][boxIndex][0] = null | 363 | this.activeMenuArr[pageIndex][boxIndex][0] = null |
| 364 | } else { | 364 | } else { |
| 365 | if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) { | 365 | if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) { |
| 366 | this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false | 366 | this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false |
| 367 | } | 367 | } |
| 368 | 368 | ||
| 369 | this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true | 369 | this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true |
| 370 | this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex | 370 | this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex |
| 371 | } | 371 | } |
| 372 | this.$forceUpdate() | 372 | this.$forceUpdate() |
| 373 | }, | 373 | }, |
| 374 | // 菜单开关 | 374 | // 菜单开关 |
| 375 | togglePage (index, isRequest = true) { | 375 | togglePage (index, isRequest = true) { |
| 376 | if (!isRequest && this.maskVisibility) { | ||
| 377 | return | ||
| 378 | } | ||
| 376 | if (index === this.showPage) { | 379 | if (index === this.showPage) { |
| 377 | this.hidePageLayer(true, isRequest) | 380 | this.hidePageLayer(true, isRequest) |
| 378 | this.hideMask() | 381 | this.hideMask() |
| 379 | this.showPage = -1 | 382 | this.showPage = -1 |
| 380 | } else { | 383 | } else { |
| 381 | if (this.showPage > -1) { | 384 | if (this.showPage > -1) { |
| 382 | this.hidePageLayer(false, isRequest) | 385 | this.hidePageLayer(false, isRequest) |
| 383 | } | 386 | } |
| 384 | this.showPageLayer(index) | 387 | this.showPageLayer(index) |
| 385 | this.showMask() | 388 | this.showMask() |
| 386 | } | 389 | } |
| 387 | if (this.on[0] === 1) { | 390 | if (this.on[0] === 1) { |
| 388 | this.on[0] = 0 | 391 | this.on[0] = 0 |
| 389 | } | 392 | } |
| 390 | this.on[index] = 1 | 393 | this.on[index] = 1 |
| 391 | }, | 394 | }, |
| 392 | showAll () { | 395 | showAll () { |
| 393 | this.on = [1, 0, 0, 0, 0] | 396 | this.on = [1, 0, 0, 0, 0] |
| 397 | this.showPage = -1 | ||
| 398 | console.log('showPage-', this.showPage) | ||
| 394 | // 输出 | 399 | // 输出 |
| 395 | this.$emit('search', { | 400 | this.$emit('search', { |
| 396 | index: {}, | 401 | index: {}, |
| 397 | value: {}, | 402 | value: {}, |
| 398 | on: this.on, | 403 | on: this.on, |
| 399 | selectedData: this.selectedData | 404 | selectedData: this.selectedData, |
| 400 | }) | 405 | }) |
| 401 | }, | 406 | }, |
| 402 | // hide遮罩层 | 407 | // hide遮罩层 |
| 403 | hideMask () { | 408 | hideMask () { |
| 404 | this.isShowMask = false | 409 | this.isShowMask = false |
| 405 | setTimeout(() => { | 410 | setTimeout(() => { |
| 406 | this.maskVisibility = false | 411 | this.maskVisibility = false |
| 407 | }, 200) | 412 | }, 200) |
| 408 | }, | 413 | }, |
| 409 | // show遮罩层 | 414 | // show遮罩层 |
| 410 | showMask () { | 415 | showMask () { |
| 411 | this.maskVisibility = true | 416 | this.maskVisibility = true |
| 412 | this.$nextTick(() => { | 417 | this.$nextTick(() => { |
| 413 | setTimeout(() => { | 418 | setTimeout(() => { |
| 414 | this.isShowMask = true | 419 | this.isShowMask = true |
| 415 | }, 0) | 420 | }, 0) |
| 416 | }) | 421 | }) |
| 417 | }, | 422 | }, |
| 418 | // hide菜单页 | 423 | // hide菜单页 |
| 419 | hidePageLayer (isAnimation,isRequset = true) { | 424 | hidePageLayer (isAnimation, isRequset = true) { |
| 420 | this.triangleDeg[this.showPage] = 0 | 425 | this.triangleDeg[this.showPage] = 0 |
| 421 | const tmpIndex = this.showPage | 426 | const tmpIndex = this.showPage |
| 422 | if (isAnimation) { | 427 | if (isAnimation) { |
| 423 | setTimeout(() => { | 428 | setTimeout(() => { |
| 424 | this.pageState.splice(tmpIndex, 1, false) | 429 | this.pageState.splice(tmpIndex, 1, false) |
| 425 | }, 200) | 430 | }, 200) |
| 426 | // debugger | 431 | // debugger |
| 427 | if(isRequset){ | 432 | if (isRequset) { |
| 428 | this.confirm() | 433 | this.confirm() |
| 429 | } | 434 | } |
| 430 | } else { | 435 | } else { |
| 431 | this.pageState.splice(tmpIndex, 1, false) | 436 | this.pageState.splice(tmpIndex, 1, false) |
| 432 | } | 437 | } |
| 433 | this.firstScrollInto = null | 438 | this.firstScrollInto = null |
| 434 | this.secondScrollInto = null | 439 | this.secondScrollInto = null |
| 435 | }, | 440 | }, |
| 436 | confirm () { | 441 | confirm () { |
| 437 | const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) | 442 | const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) |
| 438 | const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) | 443 | const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) |
| 439 | 444 | ||
| 440 | // 对结果做一下处理 | 445 | // 对结果做一下处理 |
| 441 | index.forEach((item, i) => { | 446 | index.forEach((item, i) => { |
| 442 | if (typeof (item[0]) === 'object') { | 447 | if (typeof (item[0]) === 'object') { |
| 443 | // 针对筛选结果过一个排序 | 448 | // 针对筛选结果过一个排序 |
| 444 | item.forEach((s, j) => { | 449 | item.forEach((s, j) => { |
| 445 | if (s != null) { | 450 | if (s != null) { |
| 446 | s.sort((val1, val2) => { | 451 | s.sort((val1, val2) => { |
| 447 | return val1 - val2 | 452 | return val1 - val2 |
| 448 | }) | 453 | }) |
| 449 | item[j] = s | 454 | item[j] = s |
| 450 | s.forEach((v, k) => { | 455 | s.forEach((v, k) => { |
| 451 | value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value | 456 | value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value |
| 452 | if (this.subData[i].type === 'radio' && value[i][j][k] == null) { | 457 | if (this.subData[i].type === 'radio' && value[i][j][k] == null) { |
| 453 | value[i][j] = [] | 458 | value[i][j] = [] |
| 454 | index[i][j] = [] | 459 | index[i][j] = [] |
| 455 | } | 460 | } |
| 456 | }) | 461 | }) |
| 457 | } | 462 | } |
| 458 | }) | 463 | }) |
| 459 | } else { | 464 | } else { |
| 460 | let submenu = this.subData[i].submenu[item[0]] | 465 | let submenu = this.subData[i].submenu[item[0]] |
| 461 | value[i][0] = submenu && submenu.value | 466 | value[i][0] = submenu && submenu.value |
| 462 | if (value[i].length >= 2 && item[1] != null) { | 467 | if (value[i].length >= 2 && item[1] != null) { |
| 463 | if (submenu.submenu.length > 0) { | 468 | if (submenu.submenu.length > 0) { |
| 464 | submenu = submenu.submenu[item[1]] | 469 | submenu = submenu.submenu[item[1]] |
| 465 | value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null | 470 | value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null |
| 466 | } else { | 471 | } else { |
| 467 | value[i][1] = null | 472 | value[i][1] = null |
| 468 | } | 473 | } |
| 469 | if (value[i].length >= 3 && item[2] != null) { | 474 | if (value[i].length >= 3 && item[2] != null) { |
| 470 | if (submenu.submenu.length > 0) { | 475 | if (submenu.submenu.length > 0) { |
| 471 | submenu = submenu.submenu[item[2]] | 476 | submenu = submenu.submenu[item[2]] |
| 472 | value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null | 477 | value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null |
| 473 | } else { | 478 | } else { |
| 474 | value[i][2] = null | 479 | value[i][2] = null |
| 475 | } | 480 | } |
| 476 | } | 481 | } |
| 477 | } | 482 | } |
| 478 | } | 483 | } |
| 479 | index[i] = item | 484 | index[i] = item |
| 480 | }) | 485 | }) |
| 481 | // 输出 | 486 | const params = this.selectedData |
| 482 | this.$emit('search', { | 487 | console.log('params--1', params) |
| 483 | index: index, | 488 | for (const key in params) { |
| 484 | value: value, | 489 | if (params[key].length === 0) { |
| 485 | on: this.on, | 490 | delete params[key] |
| 486 | selectedData: this.selectedData | 491 | } |
| 487 | }) | 492 | } |
| 493 | // 若筛选未选择 | ||
| 494 | if (Object.getOwnPropertyNames(params).length === 1) { | ||
| 495 | this.showAll() | ||
| 496 | } else { | ||
| 497 | this.$emit('search', { | ||
| 498 | index: index, | ||
| 499 | value: value, | ||
| 500 | on: this.on, | ||
| 501 | selectedData: params, | ||
| 502 | }) | ||
| 503 | } | ||
| 488 | }, | 504 | }, |
| 489 | // show菜单页 | 505 | // show菜单页 |
| 490 | showPageLayer (index) { | 506 | showPageLayer (index) { |
| 491 | this.processPage(index) | 507 | this.processPage(index) |
| 492 | this.pageState.splice(index, 1, true) | 508 | this.pageState.splice(index, 1, true) |
| 493 | this.$nextTick(() => { | 509 | this.$nextTick(() => { |
| 494 | setTimeout(() => { | 510 | setTimeout(() => { |
| 495 | this.showPage = index | 511 | this.showPage = index |
| 496 | }, 0) | 512 | }, 0) |
| 497 | }) | 513 | }) |
| 498 | this.triangleDeg[index] = 180 | 514 | this.triangleDeg[index] = 180 |
| 499 | }, | 515 | }, |
| 500 | reloadActiveMenuArr () { | 516 | reloadActiveMenuArr () { |
| 501 | for (let i = 0; i < this.filterData.length; i++) { | 517 | for (let i = 0; i < this.filterData.length; i++) { |
| 502 | let tmpitem = this.filterData[i] | 518 | let tmpitem = this.filterData[i] |
| 503 | const tmpArr = this.processActive(tmpitem) | 519 | const tmpArr = this.processActive(tmpitem) |
| 504 | tmpitem = this.processSubMenu(tmpitem) | 520 | tmpitem = this.processSubMenu(tmpitem) |
| 505 | if (this.activeMenuArr[i].length !== tmpArr.length) { | 521 | if (this.activeMenuArr[i].length !== tmpArr.length) { |
| 506 | this.filterData[i] = tmpitem | 522 | this.filterData[i] = tmpitem |
| 507 | this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) | 523 | this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) |
| 508 | this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) | 524 | this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) |
| 509 | } | 525 | } |
| 510 | } | 526 | } |
| 511 | this.subData = this.filterData | 527 | this.subData = this.filterData |
| 512 | this.$forceUpdate() | 528 | this.$forceUpdate() |
| 513 | }, | 529 | }, |
| 514 | processPage (index) { | 530 | processPage (index) { |
| 515 | // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 | 531 | // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 |
| 516 | this.reloadActiveMenuArr() | 532 | this.reloadActiveMenuArr() |
| 517 | // 重置UI控制数组 | 533 | // 重置UI控制数组 |
| 518 | this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) | 534 | this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) |
| 519 | if (this.menu[index].type === 'filter') { | 535 | if (this.menu[index].type === 'filter') { |
| 520 | // 重载筛选页选中状态 | 536 | // 重载筛选页选中状态 |
| 521 | const level = this.shadowActiveMenuArr[index].length | 537 | const level = this.shadowActiveMenuArr[index].length |
| 522 | for (let i = 0; i < level; i++) { | 538 | for (let i = 0; i < level; i++) { |
| 523 | const box = this.subData[index].submenu[i].submenu | 539 | const box = this.subData[index].submenu[i].submenu |
| 524 | for (let j = 0; j < box.length; j++) { | 540 | for (let j = 0; j < box.length; j++) { |
| 525 | if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { | 541 | if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { |
| 526 | this.subData[index].submenu[i].submenu[j].selected = true | 542 | this.subData[index].submenu[i].submenu[j].selected = true |
| 527 | } else { | 543 | } else { |
| 528 | this.subData[index].submenu[i].submenu[j].selected = false | 544 | this.subData[index].submenu[i].submenu[j].selected = false |
| 529 | } | 545 | } |
| 530 | } | 546 | } |
| 531 | } | 547 | } |
| 532 | } else if (this.menu[index].type === 'hierarchy') { | 548 | } else if (this.menu[index].type === 'hierarchy') { |
| 533 | this.$nextTick(() => { | 549 | this.$nextTick(() => { |
| 534 | setTimeout(() => { | 550 | setTimeout(() => { |
| 535 | // 滚动到选中项 | 551 | // 滚动到选中项 |
| 536 | this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) | 552 | this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) |
| 537 | this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) | 553 | this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) |
| 538 | }, 0) | 554 | }, 0) |
| 539 | }) | 555 | }) |
| 540 | } else if (this.menu[index].type === 'radio') { | 556 | } else if (this.menu[index].type === 'radio') { |
| 541 | // 重载筛选页选中状态 | 557 | // 重载筛选页选中状态 |
| 542 | const level = this.shadowActiveMenuArr[index].length | 558 | const level = this.shadowActiveMenuArr[index].length |
| 543 | for (let i = 0; i < level; i++) { | 559 | for (let i = 0; i < level; i++) { |
| 544 | const box = this.subData[index].submenu[i].submenu | 560 | const box = this.subData[index].submenu[i].submenu |
| 545 | for (let j = 0; j < box.length; j++) { | 561 | for (let j = 0; j < box.length; j++) { |
| 546 | if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { | 562 | if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { |
| 547 | this.subData[index].submenu[i].submenu[j].selected = true | 563 | this.subData[index].submenu[i].submenu[j].selected = true |
| 548 | } else { | 564 | } else { |
| 549 | this.subData[index].submenu[i].submenu[j].selected = false | 565 | this.subData[index].submenu[i].submenu[j].selected = false |
| 550 | } | 566 | } |
| 551 | } | 567 | } |
| 552 | } | 568 | } |
| 553 | } | 569 | } |
| 554 | }, | 570 | }, |
| 555 | processActive (tmpitem) { | 571 | processActive (tmpitem) { |
| 556 | const tmpArr = [] | 572 | const tmpArr = [] |
| 557 | if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { | 573 | if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { |
| 558 | let level = this.getMaxFloor(tmpitem.submenu) | 574 | let level = this.getMaxFloor(tmpitem.submenu) |
| 559 | while (level > 0) { | 575 | while (level > 0) { |
| 560 | tmpArr.push(0) | 576 | tmpArr.push(0) |
| 561 | level-- | 577 | level-- |
| 562 | } | 578 | } |
| 563 | } else if (tmpitem.type === 'filter') { | 579 | } else if (tmpitem.type === 'filter') { |
| 564 | let level = tmpitem.submenu.length | 580 | let level = tmpitem.submenu.length |
| 565 | while (level > 0) { | 581 | while (level > 0) { |
| 566 | tmpArr.push([]) | 582 | tmpArr.push([]) |
| 567 | level-- | 583 | level-- |
| 568 | } | 584 | } |
| 569 | } else if (tmpitem.type === 'radio') { | 585 | } else if (tmpitem.type === 'radio') { |
| 570 | let level = tmpitem.submenu.length | 586 | let level = tmpitem.submenu.length |
| 571 | while (level > 0) { | 587 | while (level > 0) { |
| 572 | tmpArr.push([]) | 588 | tmpArr.push([]) |
| 573 | level-- | 589 | level-- |
| 574 | } | 590 | } |
| 575 | } | 591 | } |
| 576 | return tmpArr | 592 | return tmpArr |
| 577 | }, | 593 | }, |
| 578 | processSubMenu (menu) { | 594 | processSubMenu (menu) { |
| 579 | if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { | 595 | if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { |
| 580 | for (let i = 0; i < menu.submenu.length; i++) { | 596 | for (let i = 0; i < menu.submenu.length; i++) { |
| 581 | menu.submenu[i] = this.processSubMenu(menu.submenu[i]) | 597 | menu.submenu[i] = this.processSubMenu(menu.submenu[i]) |
| 582 | } | 598 | } |
| 583 | } else { | 599 | } else { |
| 584 | menu.submenu = [] | 600 | menu.submenu = [] |
| 585 | } | 601 | } |
| 586 | return menu | 602 | return menu |
| 587 | }, | 603 | }, |
| 588 | // 计算菜单层级 | 604 | // 计算菜单层级 |
| 589 | getMaxFloor (treeData) { | 605 | getMaxFloor (treeData) { |
| 590 | const floor = 0 | 606 | // const floor = 0 |
| 591 | let max = 0 | 607 | let max = 0 |
| 592 | function each (data, floor) { | 608 | function each (data, floor) { |
| 593 | data.forEach(e => { | 609 | data.forEach(e => { |
| 594 | max = floor > max ? floor : max | 610 | max = floor > max ? floor : max |
| 595 | if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { | 611 | if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { |
| 596 | each(e.submenu, floor + 1) | 612 | each(e.submenu, floor + 1) |
| 597 | } | 613 | } |
| 598 | }) | 614 | }) |
| 599 | } | 615 | } |
| 600 | each(treeData, 1) | 616 | each(treeData, 1) |
| 601 | 617 | ||
| 602 | return max | 618 | return max |
| 603 | }, | 619 | }, |
| 604 | discard () { | 620 | discard () { |
| 605 | 621 | ||
| 606 | } | 622 | }, |
| 607 | } | 623 | }, |
| 608 | } | 624 | } |
| 609 | </script> | 625 | </script> |
| 610 | <style lang="scss"> | 626 | <style lang="scss"> |
| 611 | .HMfilterDropdown { | 627 | .HMfilterDropdown { |
| 612 | flex-shrink: 0; | 628 | flex-shrink: 0; |
| 613 | width: 100%; | 629 | width: 100%; |
| 614 | height: 44px; | 630 | height: 44px; |
| 615 | position: fixed; | 631 | position: fixed; |
| 616 | z-index: 997; | 632 | z-index: 997; |
| 617 | flex-wrap: nowrap; | 633 | flex-wrap: nowrap; |
| 618 | display: flex; | 634 | display: flex; |
| 619 | flex-direction: row; | 635 | flex-direction: row; |
| 620 | top: var(--window-top); | 636 | top: var(--window-top); |
| 621 | left: 0; | 637 | left: 0; |
| 622 | view { | 638 | view { |
| 623 | display: flex; | 639 | display: flex; |
| 624 | flex-wrap: nowrap; | 640 | flex-wrap: nowrap; |
| 625 | } | 641 | } |
| 626 | } | 642 | } |
| 627 | .region { | 643 | .region { |
| 628 | flex: 1; | 644 | flex: 1; |
| 629 | height: 44px; | 645 | height: 44px; |
| 630 | } | 646 | } |
| 631 | .nav { | 647 | .nav { |
| 632 | width: 100%; | 648 | width: 100%; |
| 633 | height: 44px; | 649 | height: 44px; |
| 634 | z-index: 12; | 650 | z-index: 12; |
| 635 | background-color: #ffffff; | 651 | background-color: #ffffff; |
| 636 | flex-direction: row; | 652 | flex-direction: row; |
| 637 | .first-menu { | 653 | .first-menu { |
| 638 | width: 100%; | 654 | width: 100%; |
| 639 | font-size: 16px; | 655 | font-size: 16px; |
| 640 | color: #333333; | 656 | color: #333333; |
| 641 | flex-direction: row; | 657 | flex-direction: row; |
| 642 | align-items: center; | 658 | align-items: center; |
| 643 | justify-content: center; | 659 | justify-content: center; |
| 644 | transition: color 0.2s linear; | 660 | transition: color 0.2s linear; |
| 645 | 661 | ||
| 646 | &.on { | 662 | &.on { |
| 647 | color: #ff6b4a; | 663 | color: #ff6b4a; |
| 648 | 664 | ||
| 649 | .iconfont { | 665 | .iconfont { |
| 650 | color: #ff6b4a; | 666 | color: #ff6b4a; |
| 651 | } | 667 | } |
| 652 | } | 668 | } |
| 653 | .name { | 669 | .name { |
| 654 | height: 20px; | 670 | height: 20px; |
| 655 | // font-size: 16px; | 671 | // font-size: 16px; |
| 656 | text-align: center; | 672 | text-align: center; |
| 657 | text-overflow: clip; | 673 | text-overflow: clip; |
| 658 | overflow: hidden; | 674 | overflow: hidden; |
| 659 | } | 675 | } |
| 660 | .iconfont { | 676 | .iconfont { |
| 661 | width: 13px; | 677 | width: 13px; |
| 662 | height: 13px; | 678 | height: 13px; |
| 663 | line-height: 16px; | 679 | line-height: 16px; |
| 664 | align-items: center; | 680 | align-items: center; |
| 665 | justify-content: center; | 681 | justify-content: center; |
| 666 | transition: transform 0.2s linear, color 0.2s linear; | 682 | transition: transform 0.2s linear, color 0.2s linear; |
| 667 | } | 683 | } |
| 668 | } | 684 | } |
| 669 | } | 685 | } |
| 670 | .sub-menu-class { | 686 | .sub-menu-class { |
| 671 | width: 100%; | 687 | width: 100%; |
| 672 | position: absolute; | 688 | position: absolute; |
| 673 | left: 0; | 689 | left: 0; |
| 674 | transform: translate3d(0, -100%, 0); | 690 | transform: translate3d(0, -100%, 0); |
| 675 | max-height: 345px; | 691 | max-height: 345px; |
| 676 | background-color: #ffffff; | 692 | background-color: #ffffff; |
| 677 | z-index: 11; | 693 | z-index: 11; |
| 678 | box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); | 694 | box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); |
| 679 | overflow: hidden; | 695 | overflow: hidden; |
| 680 | flex-direction: row; | 696 | flex-direction: row; |
| 681 | transition: transform 0.15s linear; | 697 | transition: transform 0.15s linear; |
| 682 | &.hide { | 698 | &.hide { |
| 683 | display: none; | 699 | display: none; |
| 684 | } | 700 | } |
| 685 | 701 | ||
| 686 | &.show { | 702 | &.show { |
| 687 | transform: translate3d(0, calc(44px + 1rpx), 0); | 703 | transform: translate3d(0, calc(44px + 1rpx), 0); |
| 688 | } | 704 | } |
| 689 | } | 705 | } |
| 690 | .sub-menu-list { | 706 | .sub-menu-list { |
| 691 | width: 100%; | 707 | width: 100%; |
| 692 | height: 345px; | 708 | height: 345px; |
| 693 | flex-direction: column; | 709 | flex-direction: column; |
| 694 | .sub-menu { | 710 | .sub-menu { |
| 695 | min-height: 44px; | 711 | min-height: 44px; |
| 696 | font-size: 13px; | 712 | font-size: 13px; |
| 697 | flex-direction: column; | 713 | flex-direction: column; |
| 698 | padding-right: 15px; | 714 | padding-right: 15px; |
| 699 | > .menu-name { | 715 | > .menu-name { |
| 700 | height: 44px; | 716 | height: 44px; |
| 701 | flex-direction: row; | 717 | flex-direction: row; |
| 702 | align-items: center; | 718 | align-items: center; |
| 703 | justify-content: space-between; | 719 | justify-content: space-between; |
| 704 | > .iconfont { | 720 | > .iconfont { |
| 705 | display: none; | 721 | display: none; |
| 706 | font-size: 18px; | 722 | font-size: 18px; |
| 707 | color: #ff6b4a; | 723 | color: #ff6b4a; |
| 708 | } | 724 | } |
| 709 | } | 725 | } |
| 710 | } | 726 | } |
| 711 | &.first { | 727 | &.first { |
| 712 | flex-shrink: 0; | 728 | flex-shrink: 0; |
| 713 | width: 236rpx; | 729 | width: 236rpx; |
| 714 | background-color: #f0f0f0; | 730 | background-color: #f0f0f0; |
| 715 | .sub-menu { | 731 | .sub-menu { |
| 716 | padding-left: 15px; | 732 | padding-left: 15px; |
| 717 | 733 | ||
| 718 | &.on { | 734 | &.on { |
| 719 | background-color: #fff; | 735 | background-color: #fff; |
| 720 | } | 736 | } |
| 721 | } | 737 | } |
| 722 | } | 738 | } |
| 723 | &.alone { | 739 | &.alone { |
| 724 | max-height: 345px; | 740 | max-height: 345px; |
| 725 | min-height: 60rpx; | 741 | min-height: 60rpx; |
| 726 | height: auto; | 742 | height: auto; |
| 727 | .sub-menu { | 743 | .sub-menu { |
| 728 | min-height: calc(44px - 1rpx); | 744 | min-height: calc(44px - 1rpx); |
| 729 | margin-left: 15px; | 745 | margin-left: 15px; |
| 730 | border-bottom: solid 1rpx #e5e5e5; | 746 | border-bottom: solid 1rpx #e5e5e5; |
| 731 | 747 | ||
| 732 | &.on { | 748 | &.on { |
| 733 | color: #ff6b4a; | 749 | color: #ff6b4a; |
| 734 | 750 | ||
| 735 | > .menu-name { | 751 | > .menu-name { |
| 736 | > .iconfont { | 752 | > .iconfont { |
| 737 | display: block; | 753 | display: block; |
| 738 | } | 754 | } |
| 739 | } | 755 | } |
| 740 | } | 756 | } |
| 741 | } | 757 | } |
| 742 | } | 758 | } |
| 743 | &.not-first { | 759 | &.not-first { |
| 744 | .sub-menu { | 760 | .sub-menu { |
| 745 | min-height: calc(44px - 1rpx); | 761 | min-height: calc(44px - 1rpx); |
| 746 | margin-left: 15px; | 762 | margin-left: 15px; |
| 747 | border-bottom: solid 1rpx #e5e5e5; | 763 | border-bottom: solid 1rpx #e5e5e5; |
| 748 | > .menu-name { | 764 | > .menu-name { |
| 749 | height: calc(44px - 1rpx); | 765 | height: calc(44px - 1rpx); |
| 750 | > .iconfont { | 766 | > .iconfont { |
| 751 | display: none; | 767 | display: none; |
| 752 | font-size: 18px; | 768 | font-size: 18px; |
| 753 | color: #ff6b4a; | 769 | color: #ff6b4a; |
| 754 | } | 770 | } |
| 755 | } | 771 | } |
| 756 | &.on { | 772 | &.on { |
| 757 | color: #ff6b4a; | 773 | color: #ff6b4a; |
| 758 | > .menu-name { | 774 | > .menu-name { |
| 759 | > .iconfont { | 775 | > .iconfont { |
| 760 | display: block; | 776 | display: block; |
| 761 | } | 777 | } |
| 762 | } | 778 | } |
| 763 | } | 779 | } |
| 764 | .more-sub-menu { | 780 | .more-sub-menu { |
| 765 | flex-direction: row; | 781 | flex-direction: row; |
| 766 | flex-wrap: wrap; | 782 | flex-wrap: wrap; |
| 767 | padding-bottom: 9px; | 783 | padding-bottom: 9px; |
| 768 | > text { | 784 | > text { |
| 769 | height: 30px; | 785 | height: 30px; |
| 770 | border-radius: 3px; | 786 | border-radius: 3px; |
| 771 | background-color: #f5f5f5; | 787 | background-color: #f5f5f5; |
| 772 | color: #9b9b9b; | 788 | color: #9b9b9b; |
| 773 | margin-bottom: 6px; | 789 | margin-bottom: 6px; |
| 774 | margin-right: 6px; | 790 | margin-right: 6px; |
| 775 | text-align: center; | 791 | text-align: center; |
| 776 | line-height: 30px; | 792 | line-height: 30px; |
| 777 | border: solid #f5f5f5 1rpx; | 793 | border: solid #f5f5f5 1rpx; |
| 778 | flex: 0 0 calc(33.33% - 6px); | 794 | flex: 0 0 calc(33.33% - 6px); |
| 779 | overflow: hidden; | 795 | overflow: hidden; |
| 780 | font-size: 12px; | 796 | font-size: 12px; |
| 781 | &:nth-child(3n) { | 797 | &:nth-child(3n) { |
| 782 | margin-right: 0; | 798 | margin-right: 0; |
| 783 | } | 799 | } |
| 784 | &.on { | 800 | &.on { |
| 785 | border-color: #f6c8ac; | 801 | border-color: #f6c8ac; |
| 786 | color: #ff6b4a; | 802 | color: #ff6b4a; |
| 787 | } | 803 | } |
| 788 | .iconfont { | 804 | .iconfont { |
| 789 | color: #9b9b9b; | 805 | color: #9b9b9b; |
| 790 | } | 806 | } |
| 791 | } | 807 | } |
| 792 | } | 808 | } |
| 793 | } | 809 | } |
| 794 | } | 810 | } |
| 795 | } | 811 | } |
| 796 | .filter { | 812 | .filter { |
| 797 | width: 100%; | 813 | width: 100%; |
| 798 | height: 345px; | 814 | height: 345px; |
| 799 | display: flex; | 815 | display: flex; |
| 800 | flex-direction: column; | 816 | flex-direction: column; |
| 801 | justify-content: space-between; | 817 | justify-content: space-between; |
| 802 | align-items: center; | 818 | align-items: center; |
| 803 | .menu-box { | 819 | .menu-box { |
| 804 | width: 698rpx; | 820 | width: 698rpx; |
| 805 | height: calc(345px - 75px); | 821 | height: calc(345px - 75px); |
| 806 | flex-shrink: 1; | 822 | flex-shrink: 1; |
| 807 | .box { | 823 | .box { |
| 808 | width: 100%; | 824 | width: 100%; |
| 809 | margin-top: 16px; | 825 | margin-top: 16px; |
| 810 | flex-direction: column; | 826 | flex-direction: column; |
| 811 | .title { | 827 | .title { |
| 812 | width: 100%; | 828 | width: 100%; |
| 813 | font-size: 13px; | 829 | font-size: 13px; |
| 814 | color: #888; | 830 | color: #888; |
| 815 | } | 831 | } |
| 816 | .labels { | 832 | .labels { |
| 817 | flex-direction: row; | 833 | flex-direction: row; |
| 818 | flex-wrap: wrap; | 834 | flex-wrap: wrap; |
| 819 | justify-content: space-between; | 835 | justify-content: space-between; |
| 820 | .on { | 836 | .on { |
| 821 | border-color: #ff6b4a; | 837 | border-color: #ff6b4a; |
| 822 | background-color: #ff6b4a; | 838 | background-color: #ff6b4a; |
| 823 | color: #fff; | 839 | color: #fff; |
| 824 | } | 840 | } |
| 825 | > view { | 841 | > view { |
| 826 | width: 220rpx; | 842 | width: 220rpx; |
| 827 | height: 30px; | 843 | height: 30px; |
| 828 | border: solid 1rpx #adadad; | 844 | border: solid 1rpx #adadad; |
| 829 | border-radius: 2px; | 845 | border-radius: 2px; |
| 830 | margin-right: 2px; | 846 | margin-right: 2px; |
| 831 | margin-top: 8px; | 847 | margin-top: 8px; |
| 832 | padding: 0 10rpx; | 848 | padding: 0 10rpx; |
| 833 | box-sizing: border-box; | 849 | box-sizing: border-box; |
| 834 | font-size: 12px; | 850 | font-size: 12px; |
| 835 | flex-direction: row; | 851 | flex-direction: row; |
| 836 | justify-content: center; | 852 | justify-content: center; |
| 837 | align-items: center; | 853 | align-items: center; |
| 838 | overflow: hidden; | 854 | overflow: hidden; |
| 839 | white-space: nowrap; | 855 | white-space: nowrap; |
| 840 | text-overflow: ellipsis; | 856 | text-overflow: ellipsis; |
| 841 | &:nth-child(4n) { | 857 | &:nth-child(4n) { |
| 842 | margin-right: 0; | 858 | margin-right: 0; |
| 843 | } | 859 | } |
| 844 | } | 860 | } |
| 845 | } | 861 | } |
| 846 | } | 862 | } |
| 847 | } | 863 | } |
| 848 | .btn-box { | 864 | .btn-box { |
| 849 | flex-shrink: 0; | 865 | flex-shrink: 0; |
| 850 | width: 100%; | 866 | width: 100%; |
| 851 | height: 75px; | 867 | height: 75px; |
| 852 | flex-direction: row !important; | 868 | flex-direction: row !important; |
| 853 | align-items: center; | 869 | align-items: center; |
| 854 | justify-content: space-between; | 870 | justify-content: space-between; |
| 855 | > view { | 871 | > view { |
| 856 | width: 320rpx; | 872 | width: 320rpx; |
| 857 | height: 40px; | 873 | height: 40px; |
| 858 | border-radius: 40px; | 874 | border-radius: 40px; |
| 859 | border: solid 1rpx #ff6b4a; | 875 | border: solid 1rpx #ff6b4a; |
| 860 | align-items: center; | 876 | align-items: center; |
| 861 | justify-content: center; | 877 | justify-content: center; |
| 862 | } | 878 | } |
| 863 | .reset { | 879 | .reset { |
| 864 | color: #ff6b4a; | 880 | color: #ff6b4a; |
| 865 | } | 881 | } |
| 866 | .submit { | 882 | .submit { |
| 867 | color: #fff; | 883 | color: #fff; |
| 868 | background-color: #ff6b4a; | 884 | background-color: #ff6b4a; |
| 869 | } | 885 | } |
| 870 | } | 886 | } |
| 871 | } | 887 | } |
| 872 | .mask { | 888 | .mask { |
| 873 | z-index: 10; | 889 | z-index: 10; |
| 874 | position: fixed; | 890 | position: fixed; |
| 875 | top: 0; | 891 | top: 0; |
| 876 | left: 0; | 892 | left: 0; |
| 877 | right: 0; | 893 | right: 0; |
| 878 | bottom: 0; | 894 | bottom: 0; |
| 879 | background-color: rgba(0, 0, 0, 0); | 895 | background-color: rgba(0, 0, 0, 0); |
| 880 | transition: background-color 0.15s linear; | 896 | transition: background-color 0.15s linear; |
| 881 | &.show { | 897 | &.show { |
| 882 | background-color: rgba(0, 0, 0, 0.5); | 898 | background-color: rgba(0, 0, 0, 0.5); |
| 883 | } | 899 | } |
| 884 | &.hide { | 900 | &.hide { |
| 885 | display: none; | 901 | display: none; |
| 886 | } | 902 | } |
| 887 | } | 903 | } |
| 888 | /* 字体图标 */ | 904 | /* 字体图标 */ |
| 889 | @font-face { | 905 | @font-face { |
| 890 | font-family: "HM-FD-font"; | 906 | font-family: "HM-FD-font"; |
| 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="); | 907 | 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="); |
| 892 | } | 908 | } |
| 893 | .iconfont { | 909 | .iconfont { |
| 894 | font-family: "HM-FD-font" !important; | 910 | font-family: "HM-FD-font" !important; |
| 895 | font-size: 13px; | 911 | font-size: 13px; |
| 896 | font-style: normal; | 912 | font-style: normal; |
| 897 | color: #757575; | 913 | color: #757575; |
| 898 | &.triangle { | 914 | &.triangle { |
| 899 | &:before { | 915 | &:before { |
| 900 | content: "\e65a"; | 916 | content: "\e65a"; |
| 901 | } | 917 | } |
| 902 | } | 918 | } |
| 903 | &.selected { | 919 | &.selected { |
| 904 | &:before { | 920 | &:before { |
| 905 | content: "\e607"; | 921 | content: "\e607"; |
| 906 | } | 922 | } |
| 907 | } | 923 | } |
| 908 | } | 924 | } |
| 909 | </style> | 925 | </style> |
| 910 | 926 |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view | 3 | <view |
| 4 | class="content skeleton" | 4 | class="content skeleton" |
| 5 | v-show="showContent" | 5 | v-show="showContent" |
| 6 | > | 6 | > |
| 7 | <view class="header"> | 7 | <view class="header"> |
| 8 | <!-- 搜索--> | 8 | <!-- 搜索--> |
| 9 | <view class="searchBar skeleton-rect"> | 9 | <view class="searchBar skeleton-rect"> |
| 10 | <icon | 10 | <icon |
| 11 | class="searchIcon" | 11 | class="searchIcon" |
| 12 | type="search" | 12 | type="search" |
| 13 | size="14" | 13 | size="14" |
| 14 | ></icon> | 14 | ></icon> |
| 15 | <input | 15 | <input |
| 16 | v-model="searchText" | 16 | v-model="searchText" |
| 17 | class="searchIpt" | 17 | class="searchIpt" |
| 18 | placeholder="老花镜" | 18 | placeholder="老花镜" |
| 19 | confirm-type="search" | 19 | confirm-type="search" |
| 20 | @blur="searchKey" | 20 | @blur="searchKey" |
| 21 | /> | 21 | /> |
| 22 | </view> | 22 | </view> |
| 23 | 23 | ||
| 24 | <!-- 筛选栏--> | 24 | <!-- 筛选栏--> |
| 25 | <!-- <view class="screenBar"> | 25 | <!-- <view class="screenBar"> |
| 26 | <view | 26 | <view |
| 27 | v-for="item in screenItems" | 27 | v-for="item in screenItems" |
| 28 | :key="item.current" | 28 | :key="item.current" |
| 29 | @click="onClickItem(item.current)" | 29 | @click="onClickItem(item.current)" |
| 30 | > | 30 | > |
| 31 | <view | 31 | <view |
| 32 | class="screenItem" | 32 | class="screenItem" |
| 33 | v-bind:class="{ active: current === item.current }" | 33 | v-bind:class="{ active: current === item.current }" |
| 34 | v-if="item.current === 2" | 34 | v-if="item.current === 2" |
| 35 | @click="dropDown" | 35 | @click="dropDown" |
| 36 | > | 36 | > |
| 37 | {{ item.text }} | 37 | {{ item.text }} |
| 38 | <icon | 38 | <icon |
| 39 | type="info" | 39 | type="info" |
| 40 | size="14" | 40 | size="14" |
| 41 | ></icon> | 41 | ></icon> |
| 42 | </view> | 42 | </view> |
| 43 | <view | 43 | <view |
| 44 | class="screenItem" | 44 | class="screenItem" |
| 45 | v-bind:class="{ active: current === item.current }" | 45 | v-bind:class="{ active: current === item.current }" |
| 46 | v-if="item.current === 4" | 46 | v-if="item.current === 4" |
| 47 | @click="showDrawer('showRight')" | 47 | @click="showDrawer('showRight')" |
| 48 | > | 48 | > |
| 49 | {{ item.text }} | 49 | {{ item.text }} |
| 50 | <icon | 50 | <icon |
| 51 | type="info" | 51 | type="info" |
| 52 | size="14" | 52 | size="14" |
| 53 | ></icon> | 53 | ></icon> |
| 54 | </view> | 54 | </view> |
| 55 | <view v-if="item.current !== 2&&item.current!==4"> | 55 | <view v-if="item.current !== 2&&item.current!==4"> |
| 56 | <view | 56 | <view |
| 57 | class="screenItem" | 57 | class="screenItem" |
| 58 | v-bind:class="{ active: current === item.current }" | 58 | v-bind:class="{ active: current === item.current }" |
| 59 | >{{ item.text }}</view> | 59 | >{{ item.text }}</view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | </view> --> | 62 | </view> --> |
| 63 | </view> | 63 | </view> |
| 64 | <Uni-drawer | 64 | <Uni-drawer |
| 65 | ref="showRight" | 65 | ref="showRight" |
| 66 | mask="true" | 66 | mask="true" |
| 67 | maskClick="true" | 67 | maskClick="true" |
| 68 | mode="right" | 68 | mode="right" |
| 69 | :width="320" | 69 | :width="320" |
| 70 | @change="change($event,'showRight')" | 70 | @change="change($event,'showRight')" |
| 71 | > | 71 | > |
| 72 | <view class="close"> | 72 | <view class="close"> |
| 73 | <view @click="closeDrawer('showRight')"> | 73 | <view @click="closeDrawer('showRight')"> |
| 74 | <text class="word-btn-white">关闭</text> | 74 | <text class="word-btn-white">关闭</text> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | </Uni-drawer> | 77 | </Uni-drawer> |
| 78 | 78 | ||
| 79 | <!-- 筛选菜单--> | 79 | <!-- 筛选菜单--> |
| 80 | <view class="content-wrap skeleton-rect"> | 80 | <view class="content-wrap skeleton-rect"> |
| 81 | <view> | 81 | <view> |
| 82 | <HMfilterDropdown | 82 | <HMfilterDropdown |
| 83 | :filterData="categoryList" | 83 | :filterData="categoryList" |
| 84 | :defaultSelected="filterDropdownValue" | 84 | :defaultSelected="filterDropdownValue" |
| 85 | :updateMenuName="true" | 85 | :updateMenuName="true" |
| 86 | @search="search" | 86 | @search="search" |
| 87 | @getList="getList" | 87 | @getList="getList" |
| 88 | data-format="Object" | 88 | data-format="Object" |
| 89 | ></HMfilterDropdown> | 89 | ></HMfilterDropdown> |
| 90 | <!-- 商品列表 --> | 90 | <!-- 商品列表 --> |
| 91 | <!-- <scroll-view | 91 | <!-- <scroll-view |
| 92 | enable-flex | 92 | enable-flex |
| 93 | @scrolltolower="handleScrolltolower" | 93 | @scrolltolower="handleScrolltolower" |
| 94 | scroll-y | 94 | scroll-y |
| 95 | style="height: 1000px;margin-bottom: 20px;" | 95 | style="height: 1000px;margin-bottom: 20px;" |
| 96 | > --> | 96 | > --> |
| 97 | <view class="goods-list"> | 97 | <view class="goods-list"> |
| 98 | <view class="product-list"> | 98 | <view class="product-list"> |
| 99 | <view | 99 | <view |
| 100 | class="product skeleton-rect" | 100 | class="product skeleton-rect" |
| 101 | v-for="(goods) in goodsList" | 101 | v-for="(goods) in goodsList" |
| 102 | :key="goods.id" | 102 | :key="goods.id" |
| 103 | > | 103 | > |
| 104 | <Card | 104 | <Card |
| 105 | :goods="goods" | 105 | :goods="goods" |
| 106 | :scrollTop="scrollTop" | 106 | :scrollTop="scrollTop" |
| 107 | :viewHeight="viewHeight" | 107 | :viewHeight="viewHeight" |
| 108 | ></Card> | 108 | ></Card> |
| 109 | </view> | 109 | </view> |
| 110 | </view> | 110 | </view> |
| 111 | <view class="loading-text"> | 111 | <view class="loading-text"> |
| 112 | <text v-if="isLoading==true">{{loadingText}}</text> | 112 | <text v-if="isLoading==true">{{loadingText}}</text> |
| 113 | <text v-else>{{loadedText}}</text> | 113 | <text v-else>{{loadedText}}</text> |
| 114 | </view> | 114 | </view> |
| 115 | </view> | 115 | </view> |
| 116 | <!-- </scroll-view> --> | 116 | <!-- </scroll-view> --> |
| 117 | </view> | 117 | </view> |
| 118 | </view> | 118 | </view> |
| 119 | </view> | 119 | </view> |
| 120 | <!--引用组件--> | 120 | <!--引用组件--> |
| 121 | <skeleton | 121 | <skeleton |
| 122 | :show="showSkeleton" | 122 | :show="showSkeleton" |
| 123 | ref="skeleton" | 123 | ref="skeleton" |
| 124 | loading="chiaroscuro" | 124 | loading="chiaroscuro" |
| 125 | selector="skeleton" | 125 | selector="skeleton" |
| 126 | bgcolor="#FFF" | 126 | bgcolor="#FFF" |
| 127 | ></skeleton> | 127 | ></skeleton> |
| 128 | </view> | 128 | </view> |
| 129 | </template> | 129 | </template> |
| 130 | 130 | ||
| 131 | <script> | 131 | <script> |
| 132 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' | 132 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' |
| 133 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 133 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
| 134 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' | 134 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' |
| 135 | import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' | 135 | import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' |
| 136 | import store from '@/store' | 136 | import store from '@/store' |
| 137 | 137 | ||
| 138 | export default { | 138 | export default { |
| 139 | components: { | 139 | components: { |
| 140 | UniDrawer: UniDrawer, | 140 | UniDrawer: UniDrawer, |
| 141 | HMfilterDropdown: HMfilterDropdown, | 141 | HMfilterDropdown: HMfilterDropdown, |
| 142 | Card: Card, | 142 | Card: Card, |
| 143 | skeleton: skeleton, | 143 | skeleton: skeleton, |
| 144 | }, | 144 | }, |
| 145 | data() { | 145 | data() { |
| 146 | return { | 146 | return { |
| 147 | indexArr: '', | 147 | indexArr: '', |
| 148 | valueArr: '', | 148 | valueArr: '', |
| 149 | isLoading: true, // 初始化加载状态 | 149 | isLoading: true, // 初始化加载状态 |
| 150 | loadingText: 'data loading...', | 150 | loadingText: 'data loading...', |
| 151 | loadedText: '~~暂无更多数据~~', | 151 | loadedText: '~~暂无更多数据~~', |
| 152 | filterDropdownValue: [], | 152 | filterDropdownValue: [], |
| 153 | filterData: [], | 153 | filterData: [], |
| 154 | searchText: '', | 154 | searchText: '', |
| 155 | scrollTop: 0, | 155 | scrollTop: 0, |
| 156 | showContent: true, | 156 | showContent: true, |
| 157 | viewHeight: uni.getSystemInfoSync().windowHeight, | 157 | viewHeight: uni.getSystemInfoSync().windowHeight, |
| 158 | showSkeleton: false, // 骨架屏显示隐藏 | 158 | showSkeleton: false, // 骨架屏显示隐藏 |
| 159 | } | 159 | } |
| 160 | }, | 160 | }, |
| 161 | onPageScroll({ scrollTop }) { | 161 | onPageScroll({ scrollTop }) { |
| 162 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 162 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
| 163 | this.scrollTop = scrollTop | 163 | this.scrollTop = scrollTop |
| 164 | }, | 164 | }, |
| 165 | computed: { | 165 | computed: { |
| 166 | goodsList() { | 166 | goodsList() { |
| 167 | // 也可以从 getters 获取 | 167 | // 也可以从 getters 获取 |
| 168 | // console.log('index-list=====>',this.$store.state.index.list) | 168 | // console.log('index-list=====>',this.$store.state.index.list) |
| 169 | const list = this.$store.state.index.list | 169 | const list = this.$store.state.index.list |
| 170 | if (list.length === 0) { | 170 | if (list.length === 0) { |
| 171 | this.isLoading = false | 171 | this.isLoading = false |
| 172 | } | 172 | } |
| 173 | this.scrollTop = 0.1 | 173 | this.scrollTop = 0.1 |
| 174 | return list | 174 | return list |
| 175 | }, | 175 | }, |
| 176 | categoryList() { | 176 | categoryList() { |
| 177 | return this.$store.state.index.categoryList | 177 | return this.$store.state.index.categoryList |
| 178 | }, | 178 | }, |
| 179 | }, | 179 | }, |
| 180 | filters: { | 180 | filters: { |
| 181 | outData(value) { | 181 | outData(value) { |
| 182 | return JSON.stringify(value) | 182 | return JSON.stringify(value) |
| 183 | }, | 183 | }, |
| 184 | }, | 184 | }, |
| 185 | /** | 185 | /** |
| 186 | * 页面载入完成后调用子组件的方法生成预加载效果 | 186 | * 页面载入完成后调用子组件的方法生成预加载效果 |
| 187 | */ | 187 | */ |
| 188 | onReady: function() { | 188 | onReady: function() { |
| 189 | this.getInitData() | 189 | this.getInitData() |
| 190 | }, | 190 | }, |
| 191 | methods: { | 191 | methods: { |
| 192 | async getInitData () { | 192 | async getInitData () { |
| 193 | this.showSkeleton = true | 193 | this.showSkeleton = true |
| 194 | await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) | 194 | await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) |
| 195 | this.showSkeleton = false | 195 | this.showSkeleton = false |
| 196 | this.showContent = true | 196 | this.showContent = true |
| 197 | }, | 197 | }, |
| 198 | showDrawer(e) { | 198 | showDrawer(e) { |
| 199 | this.$refs[e].open() | 199 | this.$refs[e].open() |
| 200 | }, | 200 | }, |
| 201 | // 朋友圈设置页面 | 201 | // 朋友圈设置页面 |
| 202 | onShareAppMessage() { | 202 | onShareAppMessage() { |
| 203 | let myName = this.$store.state.user.userInfo.nickName | 203 | let myName = this.$store.state.user.userInfo.nickName |
| 204 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { | 204 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { |
| 205 | myName = '【神秘人】' | 205 | myName = '【神秘人】' |
| 206 | } else { | 206 | } else { |
| 207 | myName = '【' + myName + '】' | 207 | myName = '【' + myName + '】' |
| 208 | } | 208 | } |
| 209 | return { | 209 | return { |
| 210 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) | 210 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) |
| 211 | path: '/pages/index/index', | 211 | path: '/pages/index/index', |
| 212 | // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 | 212 | // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 |
| 213 | success: function (res) { | 213 | success: function (res) { |
| 214 | if (res.errMsg === 'shareAppMessage:ok') { | 214 | if (res.errMsg === 'shareAppMessage:ok') { |
| 215 | console.log('分享成功！', res) | 215 | console.log('分享成功！', res) |
| 216 | } | 216 | } |
| 217 | }, | 217 | }, |
| 218 | fail: function (res) { | 218 | fail: function (res) { |
| 219 | if (res.errMsg === 'shareAppMessage:fail cancel') { | 219 | if (res.errMsg === 'shareAppMessage:fail cancel') { |
| 220 | console.log('fail', '放弃分享') | 220 | console.log('fail', '放弃分享') |
| 221 | } else if (res.errMsg === 'shareAppMessage:fail') { | 221 | } else if (res.errMsg === 'shareAppMessage:fail') { |
| 222 | console.log('fail', '分享失败') | 222 | console.log('fail', '分享失败') |
| 223 | } | 223 | } |
| 224 | }, | 224 | }, |
| 225 | } | 225 | } |
| 226 | }, | 226 | }, |
| 227 | getList() { | 227 | getList() { |
| 228 | store.dispatch('index/list') | 228 | store.dispatch('index/list') |
| 229 | this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。 | 229 | this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。 |
| 230 | // 把data里的isLoading 改为false就可以了 | 230 | // 把data里的isLoading 改为false就可以了 |
| 231 | }, | 231 | }, |
| 232 | // search(params) { | 232 | // search(params) { |
| 233 | // this.$store.index. | 233 | // this.$store.index. |
| 234 | // }, | 234 | // }, |
| 235 | closeDrawer(e) { | 235 | closeDrawer(e) { |
| 236 | this.$refs[e].close() | 236 | this.$refs[e].close() |
| 237 | }, | 237 | }, |
| 238 | change(e, type) { | 238 | change(e, type) { |
| 239 | this[type] = e | 239 | this[type] = e |
| 240 | }, | 240 | }, |
| 241 | onClickItem(e) { | 241 | onClickItem(e) { |
| 242 | if (this.current !== e) { | 242 | if (this.current !== e) { |
| 243 | this.current = e | 243 | this.current = e |
| 244 | } | 244 | } |
| 245 | }, | 245 | }, |
| 246 | dropDown() { | 246 | dropDown() { |
| 247 | console.log('下拉') | 247 | console.log('下拉') |
| 248 | }, | 248 | }, |
| 249 | searchKey(e) { | 249 | searchKey(e) { |
| 250 | const { value: keyword } = e.detail | 250 | const { value: keyword } = e.detail |
| 251 | this.keyWords = keyword | 251 | this.keyWords = keyword |
| 252 | store.dispatch('index/search', { | 252 | store.dispatch('index/search', { |
| 253 | params: {}, | 253 | params: {}, |
| 254 | keyword, | 254 | keyword, |
| 255 | }) | 255 | }) |
| 256 | }, | 256 | }, |
| 257 | // 接收菜单结果 | 257 | // 接收菜单结果 |
| 258 | search(e) { | 258 | search(e) { |
| 259 | const { on, value, selectedData } = e | 259 | const { on, value, selectedData } = e |
| 260 | let params = {} | 260 | let params = {} |
| 261 | const selectedPayload = {} | 261 | const selectedPayload = {} |
| 262 | console.log('on-----', on) | ||
| 263 | // 将传入数组字符串化 | ||
| 262 | for (const key in selectedData) { | 264 | for (const key in selectedData) { |
| 263 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { | 265 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { |
| 264 | selectedPayload[key] = selectedData[key].toString() | 266 | selectedPayload[key] = selectedData[key].toString() |
| 265 | } | 267 | } |
| 266 | } | 268 | } |
| 267 | if (on[0] === 1) { | 269 | if (on[0] === 1) { |
| 268 | // 若点击全部 | 270 | // 若点击全部 |
| 269 | this.searchText = '' | 271 | this.searchText = '' |
| 270 | store.dispatch('index/list') | 272 | store.dispatch('index/list') |
| 271 | } else { | 273 | } else { |
| 272 | for (let i = 1; i <= on.length; i++) { | 274 | for (let i = 1; i <= on.length; i++) { |
| 273 | // on[0]是全部 | 275 | // on[0]是全部 |
| 274 | if (on[i] === 1) { | 276 | if (on[i] === 1) { |
| 275 | // 若该选项被选中 | 277 | // 若该选项被选中 |
| 276 | if (this.categoryList[i].value === 'filter') { | 278 | if (this.categoryList[i].value === 'filter') { |
| 277 | params = { | 279 | params = { |
| 278 | ...selectedPayload, | 280 | ...selectedPayload, |
| 279 | ...params, | 281 | ...params, |
| 280 | } | 282 | } |
| 281 | } else if (this.categoryList[i].value === 'px') { | 283 | } else if (this.categoryList[i].value === 'px') { |
| 282 | params.orderby = value[i][0] | 284 | params.orderby = value[i][0] |
| 283 | } else { | 285 | } else { |
| 284 | params[`${this.categoryList[i].value}`] = value[i][0] | 286 | params[`${this.categoryList[i].value}`] = value[i][0] |
| 285 | } | 287 | } |
| 286 | } | 288 | } |
| 287 | } | 289 | } |
| 288 | store.dispatch('index/search', { | 290 | store.dispatch('index/search', { |
| 289 | params, | 291 | params, |
| 290 | keyword: this.keyWords, | 292 | keyword: this.keyWords, |
| 291 | }) | 293 | }) |
| 292 | } | 294 | } |
| 293 | }, | 295 | }, |
| 294 | }, | 296 | }, |
| 295 | } | 297 | } |
| 296 | </script> | 298 | </script> |
| 297 | 299 | ||
| 298 | <style lang="scss"> | 300 | <style lang="scss"> |
| 299 | .content, | 301 | .content, |
| 300 | .container { | 302 | .container { |
| 301 | display: flex; | 303 | display: flex; |
| 302 | flex-direction: column; | 304 | flex-direction: column; |
| 303 | align-items: center; | 305 | align-items: center; |
| 304 | justify-content: center; | 306 | justify-content: center; |
| 305 | width: 100%; | 307 | width: 100%; |
| 306 | } | 308 | } |
| 307 | .header { | 309 | .header { |
| 308 | display: flex; | 310 | display: flex; |
| 309 | flex-direction: column; | 311 | flex-direction: column; |
| 310 | align-items: center; | 312 | align-items: center; |
| 311 | justify-content: center; | 313 | justify-content: center; |
| 312 | background-color: #f7f6f6; | 314 | background-color: #f7f6f6; |
| 313 | height: 178rpx; | 315 | height: 178rpx; |
| 314 | width: 100%; | 316 | width: 100%; |
| 315 | z-index: 999; | 317 | z-index: 999; |
| 316 | position: fixed; | 318 | position: fixed; |
| 317 | top: 0; | 319 | top: 0; |
| 318 | left: 0; | 320 | left: 0; |
| 319 | } | 321 | } |
| 320 | .searchBar { | 322 | .searchBar { |
| 321 | width: 670rpx; | 323 | width: 670rpx; |
| 322 | display: flex; | 324 | display: flex; |
| 323 | justify-content: center; | 325 | justify-content: center; |
| 324 | align-items: center; | 326 | align-items: center; |
| 325 | box-sizing: border-box; | 327 | box-sizing: border-box; |
| 326 | padding: 0rpx 16rpx; | 328 | padding: 0rpx 16rpx; |
| 327 | border: 1px solid #ff6b4a; | 329 | border: 1px solid #ff6b4a; |
| 328 | border-radius: 8rpx; | 330 | border-radius: 8rpx; |
| 329 | background-color: #ffffff; | 331 | background-color: #ffffff; |
| 330 | } | 332 | } |
| 331 | 333 | ||
| 332 | .searchIpt { | 334 | .searchIpt { |
| 333 | height: 68rpx; | 335 | height: 68rpx; |
| 334 | width: 670rpx; | 336 | width: 670rpx; |
| 335 | padding: 16rpx; | 337 | padding: 16rpx; |
| 336 | font-size: 28rpx; | 338 | font-size: 28rpx; |
| 337 | box-sizing: border-box; | 339 | box-sizing: border-box; |
| 338 | } | 340 | } |
| 339 | .screenBar { | 341 | .screenBar { |
| 340 | width: 670rpx; | 342 | width: 670rpx; |
| 341 | height: 110rpx; | 343 | height: 110rpx; |
| 342 | display: flex; | 344 | display: flex; |
| 343 | flex-direction: row; | 345 | flex-direction: row; |
| 344 | justify-content: space-between; | 346 | justify-content: space-between; |
| 345 | align-items: center; | 347 | align-items: center; |
| 346 | color: #333333; | 348 | color: #333333; |
| 347 | font-size: 32rpx; | 349 | font-size: 32rpx; |
| 348 | } | 350 | } |
| 349 | .active { | 351 | .active { |
| 350 | color: #ff6b4a; | 352 | color: #ff6b4a; |
| 351 | } | 353 | } |
| 352 | .screenItem { | 354 | .screenItem { |
| 353 | display: flex; | 355 | display: flex; |
| 354 | justify-content: center; | 356 | justify-content: center; |
| 355 | align-items: center; | 357 | align-items: center; |
| 356 | } | 358 | } |
| 357 | .content-wrap { | 359 | .content-wrap { |
| 358 | width: 100%; | 360 | width: 100%; |
| 359 | background-color: #ffffff; | 361 | background-color: #ffffff; |
| 360 | } | 362 | } |
| 361 | 363 | ||
| 362 | .HMfilterDropdown { | 364 | .HMfilterDropdown { |
| 363 | top: 178rpx !important; | 365 | top: 178rpx !important; |
| 364 | } | 366 | } |
| 365 | 367 | ||
| 366 | .goods-list { | 368 | .goods-list { |
| 367 | padding-top: 286rpx; | 369 | padding-top: 286rpx; |
| 368 | .loading-text { | 370 | .loading-text { |
| 369 | width: 100%; | 371 | width: 100%; |
| 370 | display: flex; | 372 | display: flex; |
| 371 | justify-content: center; | 373 | justify-content: center; |
| 372 | align-items: center; | 374 | align-items: center; |
| 373 | height: 30px; | 375 | height: 30px; |
| 374 | color: #979797; | 376 | color: #979797; |
| 375 | font-size: 12px; | 377 | font-size: 12px; |
| 376 | } | 378 | } |
| 377 | .product-list { | 379 | .product-list { |
| 378 | width: 92%; | 380 | width: 92%; |
| 379 | padding: 0 4% 3vw 4%; | 381 | padding: 0 4% 3vw 4%; |
| 380 | display: flex; | 382 | display: flex; |
| 381 | justify-content: space-between; | 383 | justify-content: space-between; |
| 382 | flex-wrap: wrap; | 384 | flex-wrap: wrap; |
| 383 | .product { | 385 | .product { |
| 384 | width: 48%; | 386 | width: 48%; |
| 385 | min-height: 120rpx; | 387 | min-height: 120rpx; |
| 386 | margin: 0 0 20rpx 0; | 388 | margin: 0 0 20rpx 0; |
| 387 | background: #ffffff; | 389 | background: #ffffff; |
| 388 | border: 1px solid #f2f2f2; | 390 | border: 1px solid #f2f2f2; |
| 389 | } | 391 | } |
| 390 | } | 392 | } |
| 391 | } | 393 | } |
| 392 | </style> | 394 | </style> |
| 393 | 395 |