From fb748734ca33c189fdde516d9af1e32f7a851337 Mon Sep 17 00:00:00 2001
From: mullins <476823686@qq.com>
Date: Sat, 23 May 2020 16:03:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=83=A8=E5=88=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HMFilterDropdown/HMFilterDropdown.vue          | 1704 ++++++++++----------
 src/pages/index/index.vue                          |  179 +-
 2 files changed, 982 insertions(+), 901 deletions(-)

diff --git a/src/components/HMFilterDropdown/HMFilterDropdown.vue b/src/components/HMFilterDropdown/HMFilterDropdown.vue
index 19cc811..4ff0931 100644
--- a/src/components/HMFilterDropdown/HMFilterDropdown.vue
+++ b/src/components/HMFilterDropdown/HMFilterDropdown.vue
@@ -1,823 +1,907 @@
 <template>
-	<view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
-		<view class="nav">
-			<block v-for="(item,index) in menu" :key="index">
-				<view
-				 class="first-menu"
-				 :class="{'on':showPage==index || on[index] === 1}"
-				 @tap="togglePage(index)"
-				 v-if="!item.isNoPull" 
-				>
-					<text class="name">{{item.name}}</text>
-					<text
-					 class="iconfont triangle" 
-					 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
-					></text>
-				</view>
-				<view 
-				 class="first-menu"
-				 :class="{'on':showPage==index || on[index] === 1}"
-				 @tap="showAll()"
-				 v-else
-				>
-					<text class="name">{{item.name}}</text>
-				</view>
-			</block>
-		</view>
-		<view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
-		<block v-for="(page,page_index) in subData" :key="page_index">
-			<view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
-				<block v-if="page.type=='hierarchy'&& page.submenu.length>0">
-					<scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
-					 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
-						<block v-for="(sub,index) in page.submenu" :key="index">
-							<view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
-								<view class="menu-name">
-									<text>{{sub.name}}</text>
-									<text class="iconfont selected"></text>
-								</view>
-							</view>
-						</block>
-					</scroll-view>
-					<block v-for="(sub,index) in page.submenu" :key="index">
-						<scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
-						 :scroll-into-view="'second_id'+secondScrollInto">
-							<block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
-								<view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
-									<view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
-										<text>{{sub_second.name}}</text>
-										<text class="iconfont selected"></text>
-									</view>
-									<view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
-										<block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
-											<text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
-											 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
-											<text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
-												 class="iconfont triangle"></text></text>
-										</block>
-									</view>
-								</view>
-							</block>
-						</scroll-view>
-					</block>
-				</block>
-				<block v-if="page.type=='filter'||page.type=='checkbox'">
-					<view class="filter">
-						<scroll-view class="menu-box" :scroll-y="true">
-							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
-								<view class="title">{{box.name}}</view>
-								<view class="labels">
-									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
-									 :class="{'on':label.selected}">{{label.name}}</view>
-								</view>
-							</view>
-						</scroll-view>
-						<view class="btn-box">
-							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
-							<view class="submit" @tap="setFilterData(page_index)">确定</view>
-						</view>
-					</view>
-				</block>
-				<block v-if="page.type=='radio'">
-					<view class="filter">
-						<scroll-view class="menu-box" :scroll-y="true">
-							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
-								<view class="title">{{box.name}}</view>
-								<view class="labels">
-									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
-									 :class="{'on':label.selected}">{{label.name}}</view>
-								</view>
-							</view>
-						</scroll-view>
-						<view class="btn-box">
-							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
-							<view class="submit" @tap="setFilterData(page_index)">确定</view>
-						</view>
-					</view>
-				</block>
-			</view>
-		</block>
-	</view>
+  <view
+    class="HMfilterDropdown"
+    @touchmove.stop.prevent="discard"
+    @tap.stop="discard"
+  >
+    <view class="nav">
+      <block
+        v-for="(item,index) in menu"
+        :key="index"
+      >
+        <view
+          class="first-menu"
+          :class="{'on':showPage==index || on[index] === 1}"
+          @tap="togglePage(index)"
+          v-if="!item.isNoPull"
+        >
+          <text class="name">{{item.name}}</text>
+          <text
+            class="iconfont triangle"
+            :style="'transform:rotate('+triangleDeg[index]+'deg);'"
+          ></text>
+        </view>
+        <view
+          class="first-menu"
+          :class="{'on':showPage==index || on[index] === 1}"
+          @tap="showAll()"
+          v-else
+        >
+          <text class="name">{{item.name}}</text>
+        </view>
+      </block>
+    </view>
+    <view
+      class="mask"
+      :class="{'show':isShowMask,'hide':maskVisibility!=true}"
+      @tap="togglePage(showPage)"
+    ></view>
+    <block
+      v-for="(page,page_index) in subData"
+      :key="page_index"
+    >
+      <view
+        class="sub-menu-class"
+        :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
+      >
+        <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
+          <scroll-view
+            class="sub-menu-list"
+            :class="[activeMenuArr[page_index].length>1?'first':'alone']"
+            :scroll-y="true"
+            :scroll-into-view="'first_id'+firstScrollInto"
+          >
+            <block
+              v-for="(sub,index) in page.submenu"
+              :key="index"
+            >
+              <view
+                class="sub-menu"
+                :id="'first_id'+index"
+                :class="{'on':activeMenuArr[page_index][0]==index}"
+                @tap="selectHierarchyMenu(page_index,index,null,null)"
+              >
+                <view class="menu-name">
+                  <text>{{sub.name}}</text>
+                  <text class="iconfont selected"></text>
+                </view>
+              </view>
+            </block>
+          </scroll-view>
+          <block
+            v-for="(sub,index) in page.submenu"
+            :key="index"
+          >
+            <scroll-view
+              class="sub-menu-list not-first"
+              :scroll-y="true"
+              v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
+              :scroll-into-view="'second_id'+secondScrollInto"
+            >
+              <block
+                v-for="(sub_second,second_index) in sub.submenu"
+                :key="second_index"
+              >
+                <view
+                  class="sub-menu"
+                  :id="'second_id'+second_index"
+                  :class="{'on':activeMenuArr[page_index][1]==second_index}"
+                >
+                  <view
+                    class="menu-name"
+                    @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
+                  >
+                    <text>{{sub_second.name}}</text>
+                    <text class="iconfont selected"></text>
+                  </view>
+                  <view
+                    class="more-sub-menu"
+                    v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
+                  >
+                    <block
+                      v-for="(sub2,sub2_index) in sub_second.submenu"
+                      :key="sub2_index"
+                    >
+                      <text
+                        v-if="sub_second.showAllSub || (sub2_index<8)"
+                        :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
+                        @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
+                      >{{sub2.name}}</text>
+                      <text
+                        v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
+                        @tap="showMoreSub(second_index)"
+                      >更多<text class="iconfont triangle"></text></text>
+                    </block>
+                  </view>
+                </view>
+              </block>
+            </scroll-view>
+          </block>
+        </block>
+        <block v-if="page.type=='filter' || page.type=='checkbox'">
+          <view class="filter">
+            <scroll-view
+              class="menu-box"
+              :scroll-y="true"
+            >
+              <view
+                class="box"
+                v-for="(box,box_index) in page.submenu"
+                :key="box_index"
+              >
+                <view class="title">{{box.name}}</view>
+                <view class="labels">
+                  <view
+                    v-for="(label,label_index) in box.submenu"
+                    :key="label_index"
+                    @tap="selectFilterLabel(page_index, box_index, label_index)"
+                    :class="{'on': label.selected}"
+                  >{{label.name}}</view>
+                </view>
+              </view>
+            </scroll-view>
+            <view class="btn-box">
+              <view
+                class="reset"
+                @tap="resetFilterData(page_index)"
+              >重置</view>
+              <view
+                class="submit"
+                @tap="setFilterData(page_index)"
+              >确定</view>
+            </view>
+          </view>
+        </block>
+        <block v-if="page.type=='radio'">
+          <view class="filter">
+            <scroll-view
+              class="menu-box"
+              :scroll-y="true"
+            >
+              <view
+                class="box"
+                v-for="(box,box_index) in page.submenu"
+                :key="box_index"
+              >
+                <view class="title">{{box.name}}</view>
+                <view class="labels">
+                  <view
+                    v-for="(label,label_index) in box.submenu"
+                    :key="label_index"
+                    @tap="selectRadioLabel(page_index,box_index,label_index)"
+                    :class="{'on':label.selected}"
+                  >{{label.name}}</view>
+                </view>
+              </view>
+            </scroll-view>
+            <view class="btn-box">
+              <view
+                class="reset"
+                @tap="resetFilterData(page_index)"
+              >重置</view>
+              <view
+                class="submit"
+                @tap="setFilterData(page_index)"
+              >确定</view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				subData: [], //菜单数据
-				menu: [], //顶部横条数据
-				showPage: -1, //菜单页面显示/隐藏动画控制
-				pageState: [], //页面的状态
-				activeMenuArr: [], //UI状态
-				shadowActiveMenuArr: [], //记录选中
-				defaultActive:[],
-				triangleDeg: [], //小三角形的翻转动画控制
-				isShowMask: false, //遮罩层显示/隐藏动画控制
-				maskVisibility: false, //遮罩层显示/隐藏状态
-				//滚动区域定位
-				firstScrollInto: 0,
-				secondScrollInto: 0,
-				componentTop:0	,//组件top
-				isReadNewSelect:false,
-				on: [1,0,0,0,0],
-			}
-		},
-		props: {
-			filterData: {
-				value: Array,
-				default: []
-			},
-			defaultSelected:{
-				value: Array,
-				default: []
-			},
-			updateMenuName:{
-				value: Boolean,
-				default: true
-			},
-			dataFormat:{
-				value: String,
-				default: 'Array'
-			}
-		},
-		watch: {
-			filterData: {
-				handler() {
-					this.initMenu(); //filterData重新赋值初始化菜单
-				},
-				immediate: true
-			},
-			defaultSelected(newVal) {
-				if(newVal.length==0){
-					return;
-				}
-				this.defaultActive = JSON.parse(JSON.stringify(newVal));
-				this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
-				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
-				// if(this.updateMenuName){
-				// 	this.setMenuName();
-				// }
-			}
-		},
-		methods: {
-			initMenu() {
-				let tmpMenuActiveArr=[];
-				let tmpMenu=[];
-				for (let i = 0; i < this.filterData.length; i++) {
-					let tmpitem = this.filterData[i];
-					tmpMenu.push({
-						//如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
-						name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
-						type: tmpitem.type,
-						isNoPull: tmpitem.isNoPull,
-					});
-					// 初始化选中项数组-ui状态
-					tmpMenuActiveArr.push(this.processActive(tmpitem));
-					// 初始化角度数组
-					this.triangleDeg.push(0);
-					// 初始化控制显示状态数组
-					this.pageState.push(false);
-					// 递归处理子菜单数据
-					tmpitem = this.processSubMenu(tmpitem);
-					this.filterData[i] = tmpitem;
-				}
-				this.menu = tmpMenu;
-				// 初始化选中项数组
-				tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
-				this.defaultActive = [];
-				this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
-				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
-				// 加载菜单数据
-				this.subData = this.filterData;
-				// 设定顶部菜单名字
-				// if(this.updateMenuName){
-				// 	this.setMenuName();
-				// }
-			},
-			// setMenuName(){
-			// 	for(var i=0;i<this.activeMenuArr.length;i++){
-			// 		let row = this.activeMenuArr[i];
-			// 		if (typeof(row[0]) != 'object'){
-			// 			var tmpsub = false;
-			// 			if(row.length>0 && row[0]!=null){
-			// 				tmpsub = this.subData[i].submenu[row[0]];
-			// 				if(row.length>1 && row[1]!=null){
-			// 					tmpsub = tmpsub.submenu[row[1]];
-			// 					if(row.length>2 && row[2]!=null){
-			// 						tmpsub = tmpsub.submenu[row[2]];
-			// 					}
-			// 				}
-			// 			}else{
-			// 				tmpsub = false;
-			// 			}
-			// 			if(tmpsub){
-			// 				this.menu[i].name = tmpsub.name;
-			// 			}
-			// 		}
-			// 	}
-			// },
-			//展开更多
-			showMoreSub(index) {
-				this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
-				this.$forceUpdate();
-			},
-			//选中
-			selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
-				//读取记录
-				if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
-					level1_index) {
-					this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
-				} else {
-					this.activeMenuArr[page_index].splice(0, 1, level1_index);
-					(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);
-					(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);
-				}
-				//写入结果
-				if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
-				) {
-					let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
-					// if(this.updateMenuName){
-					// 	this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
-					// }
-					this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
-					this.togglePage(this.showPage);
-				}
-			},
-			//写入结果，筛选
-			setFilterData(page_index) {
-				this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
-				this.togglePage(this.showPage);
-			},
-			//重置结果和ui，筛选
-			resetFilterData(page_index) {
-				let tmpArr = [];
-				let level = this.shadowActiveMenuArr[page_index].length;
-				while (level > 0) {
-					tmpArr.push([]);
-					let box = this.subData[page_index].submenu[level - 1].submenu;
-					for (let i = 0; i < box.length; i++) {
-						this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
-					}
-					level--;
-				}
-				this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
-				this.$forceUpdate();
-			},
-			//选中筛选类label-UI状态
-			selectFilterLabel(page_index, box_index, label_index) {
-				let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
-				if (find_index > -1) {
-					this.activeMenuArr[page_index][box_index].splice(find_index, 1);
-					this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
-				} else {
-					this.activeMenuArr[page_index][box_index].push(label_index);
-					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
-				}
-				this.$forceUpdate();
-			},
-			//选中单选类label-UI状态
-			selectRadioLabel(page_index, box_index, label_index) {
-				
-				let activeIndex = this.activeMenuArr[page_index][box_index][0];
-				if(activeIndex == label_index){
-					this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
-					this.activeMenuArr[page_index][box_index][0] = null;
-				}else{
-					if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
-						this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
-					}
-					
-					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
-					this.activeMenuArr[page_index][box_index][0] = label_index;
-				}
-				this.$forceUpdate();
-			},
-			//菜单开关
-			togglePage(index) {
-				if (index == this.showPage) {
-					this.hidePageLayer(true);
-					this.hideMask();
-					this.showPage = -1;
-				} else {
-					if (this.showPage > -1) {
-						this.hidePageLayer(false);
-					}
-					this.showPageLayer(index);
-					this.showMask();
-				}
-				if(this.on[0] === 1) {
-					this.on[0] = 0;
-				}
-				this.on[index] = 1;
-			},
-			showAll() {
-				this.on = [1,0,0,0,0]
-				// 输出
-				this.$emit('search', {
-					index: {},
-					value: {},
-					on: this.on,
-				});
-			},
-			//hide遮罩层
-			hideMask() {
-				this.isShowMask = false;
-				setTimeout(() => {
-					this.maskVisibility = false;
-				}, 200);
-			},
-			//show遮罩层
-			showMask() {
-				this.maskVisibility = true;
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.isShowMask = true;
-					}, 0);
-				})
-			},
-			//hide菜单页
-			hidePageLayer(isAnimation) {
-				this.triangleDeg[this.showPage] = 0;
-				let tmpIndex = this.showPage;
-				if (isAnimation) {
-					setTimeout(() => {
-						this.pageState.splice(tmpIndex, 1, false);
-					}, 200);
-					this.confirm();
-				} else {
-					this.pageState.splice(tmpIndex, 1, false)
-				}
-				this.firstScrollInto = null;
-				this.secondScrollInto = null;
-			},
-			confirm() {
-				let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
-				let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
-				
-				//对结果做一下处理
-				index.forEach((item, i) => {
-					if (typeof(item[0]) == 'object') {
-						//针对筛选结果过一个排序
-						item.forEach((s, j) => {
-							if(s!=null){
-								s.sort((val1, val2) => {
-									return val1 - val2;
-								});
-								item[j] = s;
-								s.forEach((v, k) => {
-									value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
-									if(this.subData[i].type == 'radio' && value[i][j][k] == null){
-										value[i][j] = [];
-										index[i][j] = [];
-									}
-								});
-							}
-						});
-					}else{
-						let submenu = this.subData[i].submenu[item[0]];
-						value[i][0] = submenu && submenu.value;
-						if(value[i].length>=2  && item[1]!=null){
-							if(submenu.submenu.length>0){
-								submenu = submenu.submenu[item[1]];
-								value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
-							}else{
-								value[i][1] = null
-							}
-							if(value[i].length>=3 && item[2]!=null){
-								if(submenu.submenu.length>0){
-									submenu = submenu.submenu[item[2]];
-									value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
-								}else{
-									value[i][2] = null;
-								}
-							}
-						}
-					}
-					index[i] = item;
-					
-				});
-				// 输出
-				this.$emit('search', {
-					index: index,
-					value: value,
-					on: this.on,
-				});
-			},
-			//show菜单页
-			showPageLayer(index) {
-				this.processPage(index);
-				this.pageState.splice(index, 1, true);
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.showPage = index;
-					}, 0);
-				})
-				this.triangleDeg[index] = 180;
-			},
-			reloadActiveMenuArr(){
-				for (let i = 0; i < this.filterData.length; i++) {
-					let tmpitem = this.filterData[i];
-					let tmpArr = this.processActive(tmpitem);
-					tmpitem = this.processSubMenu(tmpitem);
-					if(this.activeMenuArr[i].length!=tmpArr.length){
-						this.filterData[i] = tmpitem;
-						this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
-						this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
-					}
-				} 
-				this.subData = this.filterData;
-				this.$forceUpdate();
-			},
-			processPage(index) {
-				//check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
-				this.reloadActiveMenuArr();
-				//重置UI控制数组
-				this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
-				if (this.menu[index].type == 'filter') {
-					//重载筛选页选中状态
-					let level = this.shadowActiveMenuArr[index].length;
-					for (let i = 0; i < level; i++) {
-						let box = this.subData[index].submenu[i].submenu;
-						for (let j = 0; j < box.length; j++) {
-							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
-								this.subData[index].submenu[i].submenu[j].selected = true;
-							} else {
-								this.subData[index].submenu[i].submenu[j].selected = false;
-							}
-						}
-					}
-				} else if (this.menu[index].type == 'hierarchy') {
-					this.$nextTick(() => {
-						setTimeout(() => {
-							//滚动到选中项
-							this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
-							this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
-						}, 0);
-					})
-				} else if (this.menu[index].type == 'radio') {
-					//重载筛选页选中状态
-					let level = this.shadowActiveMenuArr[index].length;
-					for (let i = 0; i < level; i++) {
-						let box = this.subData[index].submenu[i].submenu;
-						for (let j = 0; j < box.length; j++) {
-							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
-								this.subData[index].submenu[i].submenu[j].selected = true;
-							} else {
-								this.subData[index].submenu[i].submenu[j].selected = false;
-							}
-						}
-					}
-				} 
-			},
-			processActive(tmpitem) {
-				let tmpArr = []
-				if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
-					let level = this.getMaxFloor(tmpitem.submenu);
-					while (level > 0) {
-						tmpArr.push(0);
-						level--;
-					}
-				} else if (tmpitem.type == 'filter') {
-					let level = tmpitem.submenu.length;
-					while (level > 0) {
-						tmpArr.push([]);
-						level--;
-					}
-				} else if (tmpitem.type == 'radio') {
-					let level = tmpitem.submenu.length;
-					while (level > 0) {
-						tmpArr.push([]);
-						level--;
-					}
-				}
-				return tmpArr;
-			},
-			processSubMenu(menu) {
-				if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
-					for (let i = 0; i < menu.submenu.length; i++) {
-						menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
-					}
-				} else {
-					menu.submenu = [];
-				}
-				return menu;
-			},
-			//计算菜单层级
-			getMaxFloor(treeData) {
-				let floor = 0
-				let max = 0
-				function each(data, floor) {
-					data.forEach(e => {
-						max = floor > max ? floor : max;
-						if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
-							each(e.submenu, floor + 1)
-						}
-					})
-				}
-				each(treeData, 1)
-				return max;
-			},
-			discard() {
+export default {
+  data () {
+    return {
+      subData: [], // 菜单数据
+      menu: [], // 顶部横条数据
+      showPage: -1, // 菜单页面显示/隐藏动画控制
+      pageState: [], // 页面的状态
+      activeMenuArr: [], // UI状态
+      shadowActiveMenuArr: [], // 记录选中
+      defaultActive: [],
+      triangleDeg: [], // 小三角形的翻转动画控制
+      isShowMask: false, // 遮罩层显示/隐藏动画控制
+      maskVisibility: false, // 遮罩层显示/隐藏状态
+      // 滚动区域定位
+      firstScrollInto: 0,
+      secondScrollInto: 0,
+      componentTop: 0, // 组件top
+      isReadNewSelect: false,
+      on: [1, 0, 0, 0, 0],
+      selectedData: {}
+    }
+  },
+  props: {
+    filterData: {
+      value: Array,
+      default: []
+    },
+    defaultSelected: {
+      value: Array,
+      default: []
+    },
+    updateMenuName: {
+      value: Boolean,
+      default: true
+    },
+    dataFormat: {
+      value: String,
+      default: 'Array'
+    }
+  },
+  watch: {
+    filterData: {
+      handler () {
+        this.initMenu() // filterData重新赋值初始化菜单
+      },
+      immediate: true
+    },
+    defaultSelected (newVal) {
+      if (newVal.length === 0) {
+        return
+      }
+      this.defaultActive = JSON.parse(JSON.stringify(newVal))
+      this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
+      this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
+    }
+  },
+  methods: {
+    initMenu () {
+      let tmpMenuActiveArr = []
+      const tmpMenu = []
+      for (let i = 0; i < this.filterData.length; i++) {
+        let tmpitem = this.filterData[i]
+        tmpMenu.push({
+          // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
+          name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
+          type: tmpitem.type,
+          isNoPull: tmpitem.isNoPull
+        })
+        // 初始化选中项数组-ui状态
+        tmpMenuActiveArr.push(this.processActive(tmpitem))
+        // 初始化角度数组
+        this.triangleDeg.push(0)
+        // 初始化控制显示状态数组
+        this.pageState.push(false)
+        // 递归处理子菜单数据
+        tmpitem = this.processSubMenu(tmpitem)
+        this.filterData[i] = tmpitem
+        if (tmpitem.type === 'filter') {
+          for (let i = 0; i < tmpitem.length; i++) {
+            this.selectedData[`${tmpitem.submenu[i].value}`] = []
+          }
+        }
+      }
+      console.log('this.selectedData', this.selectedData)
+      this.menu = tmpMenu
+      // 初始化选中项数组
+      tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
+      this.defaultActive = []
+      this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
+      this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
+      // 加载菜单数据
+      this.subData = this.filterData
+    },
+    // 展开更多
+    showMoreSub (index) {
+      this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
+      this.$forceUpdate()
+    },
+    // 选中
+    selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
+      // 读取记录
+      if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
+        this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
+      } else {
+        this.activeMenuArr[page_index].splice(0, 1, level1_index);
+        (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);
+        (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)
+      }
+      // 写入结果
+      if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
+      ) {
+        const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
+        this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
+        this.togglePage(this.showPage)
+      }
+    },
+    // 写入结果，筛选
+    setFilterData (page_index) {
+      this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
+      this.togglePage(this.showPage)
+    },
+    // 重置结果和ui，筛选
+    resetFilterData (page_index) {
+      const tmpArr = []
+      let level = this.shadowActiveMenuArr[page_index].length
+      while (level > 0) {
+        tmpArr.push([])
+        const box = this.subData[page_index].submenu[level - 1].submenu
+        for (let i = 0; i < box.length; i++) {
+          this.subData[page_index].submenu[level - 1].submenu[i].selected = false
+        }
+        level--
+      }
+      this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
+      this.$forceUpdate()
+    },
+    // 选中筛选类label-UI状态
+    selectFilterLabel (page_index, box_index, label_index) {
+      const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
+      console.log('select', page_index, box_index, label_index, findIndex)
+      const data = this.filterData[page_index].submenu
+      const selected = this.selectedData[`${data[box_index].value}`]
+      if (findIndex > -1) {
+        this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
+        this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
+        for (let i = 0; i < selected.length; i++) {
+          if (selected[i] === data[box_index].submenu[label_index].value) {
+            console.log('dd', this.selectedData[`${data[box_index].value}`], selected)
+            this.selectedData[`${data[box_index].value}`] = selected.slice(1, 1)
+            console.log('dd2', this.selectedData[`${data[box_index].value}`], selected)
+          }
+        }
+      } else {
+        this.activeMenuArr[page_index][box_index].push(label_index)
+        this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
+        if (!selected) {
+          this.selectedData[`${data[box_index].value}`] = []
+          this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
+        } else {
+          this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
+        }
+        // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
+        console.log('---', data, this.filterData, this.selectedData)
+      }
+      this.$forceUpdate()
+    },
+    // 选中单选类label-UI状态
+    selectRadioLabel (page_index, box_index, label_index) {
+      const activeIndex = this.activeMenuArr[page_index][box_index][0]
+      if (activeIndex == label_index) {
+        this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
+        this.activeMenuArr[page_index][box_index][0] = null
+      } else {
+        if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) {
+          this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
+        }
 
-			}
-		}
-	}
+        this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
+        this.activeMenuArr[page_index][box_index][0] = label_index
+      }
+      this.$forceUpdate()
+    },
+    // 菜单开关
+    togglePage (index) {
+      if (index == this.showPage) {
+        this.hidePageLayer(true)
+        this.hideMask()
+        this.showPage = -1
+      } else {
+        if (this.showPage > -1) {
+          this.hidePageLayer(false)
+        }
+        this.showPageLayer(index)
+        this.showMask()
+      }
+      if (this.on[0] === 1) {
+        this.on[0] = 0
+      }
+      this.on[index] = 1
+    },
+    showAll () {
+      this.on = [1, 0, 0, 0, 0]
+      // 输出
+      this.$emit('search', {
+        index: {},
+        value: {},
+        on: this.on,
+        selectedData: this.selectedData
+      })
+    },
+    // hide遮罩层
+    hideMask () {
+      this.isShowMask = false
+      setTimeout(() => {
+        this.maskVisibility = false
+      }, 200)
+    },
+    // show遮罩层
+    showMask () {
+      this.maskVisibility = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.isShowMask = true
+        }, 0)
+      })
+    },
+    // hide菜单页
+    hidePageLayer (isAnimation) {
+      this.triangleDeg[this.showPage] = 0
+      const tmpIndex = this.showPage
+      if (isAnimation) {
+        setTimeout(() => {
+          this.pageState.splice(tmpIndex, 1, false)
+        }, 200)
+        this.confirm()
+      } else {
+        this.pageState.splice(tmpIndex, 1, false)
+      }
+      this.firstScrollInto = null
+      this.secondScrollInto = null
+    },
+    confirm () {
+      const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
+      const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
+
+      // 对结果做一下处理
+      index.forEach((item, i) => {
+        if (typeof (item[0]) === 'object') {
+          // 针对筛选结果过一个排序
+          item.forEach((s, j) => {
+            if (s != null) {
+              s.sort((val1, val2) => {
+                return val1 - val2
+              })
+              item[j] = s
+              s.forEach((v, k) => {
+                value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
+                if (this.subData[i].type == 'radio' && value[i][j][k] == null) {
+                  value[i][j] = []
+                  index[i][j] = []
+                }
+              })
+            }
+          })
+        } else {
+          let submenu = this.subData[i].submenu[item[0]]
+          value[i][0] = submenu && submenu.value
+          if (value[i].length >= 2 && item[1] != null) {
+            if (submenu.submenu.length > 0) {
+              submenu = submenu.submenu[item[1]]
+              value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
+            } else {
+              value[i][1] = null
+            }
+            if (value[i].length >= 3 && item[2] != null) {
+              if (submenu.submenu.length > 0) {
+                submenu = submenu.submenu[item[2]]
+                value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
+              } else {
+                value[i][2] = null
+              }
+            }
+          }
+        }
+        index[i] = item
+      })
+      // 输出
+      this.$emit('search', {
+        index: index,
+        value: value,
+        on: this.on,
+        selectedData: this.selectedData
+      })
+    },
+    // show菜单页
+    showPageLayer (index) {
+      this.processPage(index)
+      this.pageState.splice(index, 1, true)
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.showPage = index
+        }, 0)
+      })
+      this.triangleDeg[index] = 180
+    },
+    reloadActiveMenuArr () {
+      for (let i = 0; i < this.filterData.length; i++) {
+        let tmpitem = this.filterData[i]
+        const tmpArr = this.processActive(tmpitem)
+        tmpitem = this.processSubMenu(tmpitem)
+        if (this.activeMenuArr[i].length != tmpArr.length) {
+          this.filterData[i] = tmpitem
+          this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
+          this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
+        }
+      }
+      this.subData = this.filterData
+      this.$forceUpdate()
+    },
+    processPage (index) {
+      // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
+      this.reloadActiveMenuArr()
+      // 重置UI控制数组
+      this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
+      if (this.menu[index].type === 'filter') {
+        // 重载筛选页选中状态
+        const level = this.shadowActiveMenuArr[index].length
+        for (let i = 0; i < level; i++) {
+          const box = this.subData[index].submenu[i].submenu
+          for (let j = 0; j < box.length; j++) {
+            if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
+              this.subData[index].submenu[i].submenu[j].selected = true
+            } else {
+              this.subData[index].submenu[i].submenu[j].selected = false
+            }
+          }
+        }
+      } else if (this.menu[index].type === 'hierarchy') {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            // 滚动到选中项
+            this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
+            this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
+          }, 0)
+        })
+      } else if (this.menu[index].type === 'radio') {
+        // 重载筛选页选中状态
+        const level = this.shadowActiveMenuArr[index].length
+        for (let i = 0; i < level; i++) {
+          const box = this.subData[index].submenu[i].submenu
+          for (let j = 0; j < box.length; j++) {
+            if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
+              this.subData[index].submenu[i].submenu[j].selected = true
+            } else {
+              this.subData[index].submenu[i].submenu[j].selected = false
+            }
+          }
+        }
+      }
+    },
+    processActive (tmpitem) {
+      const tmpArr = []
+      if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
+        let level = this.getMaxFloor(tmpitem.submenu)
+        while (level > 0) {
+          tmpArr.push(0)
+          level--
+        }
+      } else if (tmpitem.type === 'filter') {
+        let level = tmpitem.submenu.length
+        while (level > 0) {
+          tmpArr.push([])
+          level--
+        }
+      } else if (tmpitem.type === 'radio') {
+        let level = tmpitem.submenu.length
+        while (level > 0) {
+          tmpArr.push([])
+          level--
+        }
+      }
+      return tmpArr
+    },
+    processSubMenu (menu) {
+      if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
+        for (let i = 0; i < menu.submenu.length; i++) {
+          menu.submenu[i] = this.processSubMenu(menu.submenu[i])
+        }
+      } else {
+        menu.submenu = []
+      }
+      return menu
+    },
+    // 计算菜单层级
+    getMaxFloor (treeData) {
+      const floor = 0
+      let max = 0
+      function each (data, floor) {
+        data.forEach(e => {
+          max = floor > max ? floor : max
+          if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
+            each(e.submenu, floor + 1)
+          }
+        })
+      }
+      each(treeData, 1)
+
+      return max
+    },
+    discard () {
+
+    }
+  }
+}
 </script>
 <style lang="scss">
-	.HMfilterDropdown {
-		flex-shrink: 0;
-		width: 100%;
-		height: 44px;
-		position: fixed;
-		z-index: 997;
-		flex-wrap: nowrap;
-		display: flex;
-		flex-direction: row;
-		top: var(--window-top);
-		left:0;
-		view {
-			display: flex;
-			flex-wrap: nowrap;
-		}
-	}
-	.region {
-		flex: 1;
-		height: 44px;
-	}
-	.nav {
-		width: 100%;
-		height: 44px;
-		z-index: 12;
-		background-color: #ffffff;
-		flex-direction: row;
-		.first-menu {
-			width: 100%;
-			font-size: 16px;
-			color: #333333;
-			flex-direction: row;
-			align-items: center;
-			justify-content: center;
-			transition: color .2s linear;
+.HMfilterDropdown {
+  flex-shrink: 0;
+  width: 100%;
+  height: 44px;
+  position: fixed;
+  z-index: 997;
+  flex-wrap: nowrap;
+  display: flex;
+  flex-direction: row;
+  top: var(--window-top);
+  left: 0;
+  view {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+}
+.region {
+  flex: 1;
+  height: 44px;
+}
+.nav {
+  width: 100%;
+  height: 44px;
+  z-index: 12;
+  background-color: #ffffff;
+  flex-direction: row;
+  .first-menu {
+    width: 100%;
+    font-size: 16px;
+    color: #333333;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s linear;
 
-			&.on {
-				color: #FF6B4A;
+    &.on {
+      color: #ff6b4a;
 
-				.iconfont {
-					color: #FF6B4A;
-				}
-			}
-			.name {
-				height: 20px;
-				// font-size: 16px;
-				text-align: center;
-				text-overflow: clip;
-				overflow: hidden;
-			}
-			.iconfont {
-				width: 13px;
-				height: 13px;
-				line-height: 16px;
-				align-items: center;
-				justify-content: center;
-				transition: transform .2s linear, color .2s linear;
-			}
-		}
-	}
-	.sub-menu-class {
-		width: 100%;
-		position: absolute;
-		left: 0;
-		transform: translate3d(0, - 100%, 0);
-		max-height: 345px;
-		background-color: #ffffff;
-		z-index: 11;
-		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
-		overflow: hidden;
-		flex-direction: row;
-		transition: transform .15s linear;
-		&.hide {
-			display: none;
-		}
+      .iconfont {
+        color: #ff6b4a;
+      }
+    }
+    .name {
+      height: 20px;
+      // font-size: 16px;
+      text-align: center;
+      text-overflow: clip;
+      overflow: hidden;
+    }
+    .iconfont {
+      width: 13px;
+      height: 13px;
+      line-height: 16px;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s linear, color 0.2s linear;
+    }
+  }
+}
+.sub-menu-class {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  transform: translate3d(0, -100%, 0);
+  max-height: 345px;
+  background-color: #ffffff;
+  z-index: 11;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  flex-direction: row;
+  transition: transform 0.15s linear;
+  &.hide {
+    display: none;
+  }
 
-		&.show {
-			transform: translate3d(0, calc(44px + 1rpx), 0);
-		}
-	}
-	.sub-menu-list {
-		width: 100%;
-		height: 345px;
-		flex-direction: column;
-		.sub-menu {
-			min-height: 44px;
-			font-size: 13px;
-			flex-direction: column;
-			padding-right: 15px;
-			>.menu-name {
-				height: 44px;
-				flex-direction: row;
-				align-items: center;
-				justify-content: space-between;
-				>.iconfont {
-					display: none;
-					font-size: 18px;
-					color: #FF6B4A;
-				}
-			}
-		}
-		&.first {
-			flex-shrink: 0;
-			width: 236rpx;
-			background-color: #f0f0f0;
-			.sub-menu {
-				padding-left: 15px;
+  &.show {
+    transform: translate3d(0, calc(44px + 1rpx), 0);
+  }
+}
+.sub-menu-list {
+  width: 100%;
+  height: 345px;
+  flex-direction: column;
+  .sub-menu {
+    min-height: 44px;
+    font-size: 13px;
+    flex-direction: column;
+    padding-right: 15px;
+    > .menu-name {
+      height: 44px;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      > .iconfont {
+        display: none;
+        font-size: 18px;
+        color: #ff6b4a;
+      }
+    }
+  }
+  &.first {
+    flex-shrink: 0;
+    width: 236rpx;
+    background-color: #f0f0f0;
+    .sub-menu {
+      padding-left: 15px;
 
-				&.on {
-					background-color: #fff;
-				}
-			}
-		}
-		&.alone {
-			max-height: 345px;
-			min-height: 60rpx;
-			height: auto;
-			.sub-menu {
-				min-height: calc(44px - 1rpx);
-				margin-left: 15px;
-				border-bottom: solid 1rpx #e5e5e5;
+      &.on {
+        background-color: #fff;
+      }
+    }
+  }
+  &.alone {
+    max-height: 345px;
+    min-height: 60rpx;
+    height: auto;
+    .sub-menu {
+      min-height: calc(44px - 1rpx);
+      margin-left: 15px;
+      border-bottom: solid 1rpx #e5e5e5;
 
-				&.on {
-					color: #FF6B4A;
+      &.on {
+        color: #ff6b4a;
 
-					>.menu-name {
-						>.iconfont {
-							display: block;
-						}
-					}
-				}
-			}
-		}
-		&.not-first {
-			.sub-menu {
-				min-height: calc(44px - 1rpx);
-				margin-left: 15px;
-				border-bottom: solid 1rpx #e5e5e5;
-				>.menu-name {
-					height: calc(44px - 1rpx);
-					>.iconfont {
-						display: none;
-						font-size: 18px;
-						color: #FF6B4A;
-					}
-				}
-				&.on {
-					color: #FF6B4A;
-					>.menu-name {
-						>.iconfont {
-							display: block;
-						}
-					}
-				}
-				.more-sub-menu {
-					flex-direction: row;
-					flex-wrap: wrap;
-					padding-bottom: 9px;
-					>text {
-						height: 30px;
-						border-radius: 3px;
-						background-color: #f5f5f5;
-						color: #9b9b9b;
-						margin-bottom: 6px;
-						margin-right: 6px;
-						text-align: center;
-						line-height: 30px;
-						border: solid #f5f5f5 1rpx;
-						flex: 0 0 calc(33.33% - 6px);
-						overflow: hidden;
-						font-size: 12px;
-						&:nth-child(3n) {
-							margin-right: 0;
-						}
-						&.on {
-							border-color: #f6c8ac;
-							color: #FF6B4A;
-						}
-						.iconfont {
-							color: #9b9b9b;
-						}
-					}
-				}
-			}
-		}
-	}
-	.filter {
-		width: 100%;
-		height: 345px;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		align-items: center;
-		.menu-box {
-			width: 698rpx;
-			height: calc(345px - 75px);
-			flex-shrink: 1;
-			.box {
-				width: 100%;
-				margin-top: 16px;
-				flex-direction: column;
-				.title {
-					width: 100%;
-					font-size: 13px;
-					color: #888;
-				}
-				.labels {
-					flex-direction: row;
-					flex-wrap: wrap;
-					.on {
-						border-color: #FF6B4A;
-						background-color: #FF6B4A;
-						color: #fff;
-					}
-					>view {
-						width: 148rpx;
-						height: 30px;
-						border: solid 1rpx #adadad;
-						border-radius: 2px;
-						margin-right: 15px;
-						margin-top: 8px;
-						padding: 0 16rpx;
-						box-sizing: border-box;
-						font-size: 12px;
-						flex-direction: row;
-						justify-content: center;
-						align-items: center;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						&:nth-child(4n) {
-							margin-right: 0;
-						}
-					}
-				}
-			}
-		}
-		.btn-box {
-			flex-shrink: 0;
-			width: 100%;
-			height: 75px;
-			flex-direction: row !important;
-			align-items: center;
-			justify-content: space-between;
-			>view {
-				width: 320rpx;
-				height: 40px;
-				border-radius: 40px;
-				border: solid 1rpx #FF6B4A;
-				align-items: center;
-				justify-content: center;
-			}
-			.reset {
-				color: #FF6B4A;
-			}
-			.submit {
-				color: #fff;
-				background-color: #FF6B4A;
-			}
-		}
-	}
-	.mask {
-		z-index: 10;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba(0, 0, 0, 0);
-		transition: background-color .15s linear;
-		&.show {
-			background-color: rgba(0, 0, 0, 0.5);
-		}
-		&.hide {
-			display: none;
-		}
-	}
-	/* 字体图标 */
-	@font-face {
-		font-family: "HM-FD-font";
-		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=');
-	}
-	.iconfont {
-		font-family: "HM-FD-font" !important;
-		font-size: 13px;
-		font-style: normal;
-		color: #757575;
-		&.triangle {
-			&:before {
-				content: "\e65a";
-			}
-		}
-		&.selected {
-			&:before {
-				content: "\e607";
-			}
-		}
-	}
+        > .menu-name {
+          > .iconfont {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  &.not-first {
+    .sub-menu {
+      min-height: calc(44px - 1rpx);
+      margin-left: 15px;
+      border-bottom: solid 1rpx #e5e5e5;
+      > .menu-name {
+        height: calc(44px - 1rpx);
+        > .iconfont {
+          display: none;
+          font-size: 18px;
+          color: #ff6b4a;
+        }
+      }
+      &.on {
+        color: #ff6b4a;
+        > .menu-name {
+          > .iconfont {
+            display: block;
+          }
+        }
+      }
+      .more-sub-menu {
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding-bottom: 9px;
+        > text {
+          height: 30px;
+          border-radius: 3px;
+          background-color: #f5f5f5;
+          color: #9b9b9b;
+          margin-bottom: 6px;
+          margin-right: 6px;
+          text-align: center;
+          line-height: 30px;
+          border: solid #f5f5f5 1rpx;
+          flex: 0 0 calc(33.33% - 6px);
+          overflow: hidden;
+          font-size: 12px;
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+          &.on {
+            border-color: #f6c8ac;
+            color: #ff6b4a;
+          }
+          .iconfont {
+            color: #9b9b9b;
+          }
+        }
+      }
+    }
+  }
+}
+.filter {
+  width: 100%;
+  height: 345px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  .menu-box {
+    width: 698rpx;
+    height: calc(345px - 75px);
+    flex-shrink: 1;
+    .box {
+      width: 100%;
+      margin-top: 16px;
+      flex-direction: column;
+      .title {
+        width: 100%;
+        font-size: 13px;
+        color: #888;
+      }
+      .labels {
+        flex-direction: row;
+        flex-wrap: wrap;
+        .on {
+          border-color: #ff6b4a;
+          background-color: #ff6b4a;
+          color: #fff;
+        }
+        > view {
+          width: 148rpx;
+          height: 30px;
+          border: solid 1rpx #adadad;
+          border-radius: 2px;
+          margin-right: 15px;
+          margin-top: 8px;
+          padding: 0 16rpx;
+          box-sizing: border-box;
+          font-size: 12px;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          &:nth-child(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+  .btn-box {
+    flex-shrink: 0;
+    width: 100%;
+    height: 75px;
+    flex-direction: row !important;
+    align-items: center;
+    justify-content: space-between;
+    > view {
+      width: 320rpx;
+      height: 40px;
+      border-radius: 40px;
+      border: solid 1rpx #ff6b4a;
+      align-items: center;
+      justify-content: center;
+    }
+    .reset {
+      color: #ff6b4a;
+    }
+    .submit {
+      color: #fff;
+      background-color: #ff6b4a;
+    }
+  }
+}
+.mask {
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.15s linear;
+  &.show {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  &.hide {
+    display: none;
+  }
+}
+/* 字体图标 */
+@font-face {
+  font-family: "HM-FD-font";
+  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=");
+}
+.iconfont {
+  font-family: "HM-FD-font" !important;
+  font-size: 13px;
+  font-style: normal;
+  color: #757575;
+  &.triangle {
+    &:before {
+      content: "\e65a";
+    }
+  }
+  &.selected {
+    &:before {
+      content: "\e607";
+    }
+  }
+}
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index e2dabf5..d7c5d98 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,19 +3,27 @@
     <view class="header">
       <!-- 搜索-->
       <view class="searchBar">
-        <icon class="searchIcon" type="search" size="14"></icon>
+        <icon
+          class="searchIcon"
+          type="search"
+          size="14"
+        ></icon>
         <input
-         v-model="searchText"
-         class="searchIpt"
-         placeholder="老花镜"
-         confirm-type="search"
-         @blur="searchKey"
+          v-model="searchText"
+          class="searchIpt"
+          placeholder="老花镜"
+          confirm-type="search"
+          @blur="searchKey"
         />
       </view>
 
       <!-- 筛选栏-->
       <!-- <view class="screenBar">
-        <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
+        <view
+          v-for="item in screenItems"
+          :key="item.current"
+          @click="onClickItem(item.current)"
+        >
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
@@ -23,7 +31,10 @@
             @click="dropDown"
           >
             {{ item.text }}
-            <icon type="info" size="14"></icon>
+            <icon
+              type="info"
+              size="14"
+            ></icon>
           </view>
           <view
             class="screenItem"
@@ -32,7 +43,10 @@
             @click="showDrawer('showRight')"
           >
             {{ item.text }}
-            <icon type="info" size="14"></icon>
+            <icon
+              type="info"
+              size="14"
+            ></icon>
           </view>
           <view v-if="item.current !== 2&&item.current!==4">
             <view
@@ -41,7 +55,7 @@
             >{{ item.text }}</view>
           </view>
         </view>
-      </view>-->
+      </view> -->
     </view>
     <Uni-drawer
       ref="showRight"
@@ -61,7 +75,7 @@
     <!-- 筛选菜单-->
     <view class="content-wrap">
       <view>
-       <HMfilterDropdown
+        <HMfilterDropdown
           :filterData="categoryList"
           :defaultSelected="filterDropdownValue"
           :updateMenuName="true"
@@ -72,7 +86,11 @@
         <!-- 商品列表 -->
         <view class="goods-list">
           <view class="product-list">
-            <view class="product" v-for="(goods) in goodsList" :key="goods.id">
+            <view
+              class="product"
+              v-for="(goods) in goodsList"
+              :key="goods.id"
+            >
               <Card :goods="goods"></Card>
             </view>
           </view>
@@ -84,11 +102,10 @@
 </template>
 
 <script>
-import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
-import Card from "@/components/CommodityCard/CommodityCard.vue";
-import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
-import data from "@/common/data.js"; //筛选菜单数据
-import store from '@/store';
+import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
+import Card from '@/components/CommodityCard/CommodityCard.vue'
+import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
+import store from '@/store'
 
 export default {
   components: {
@@ -96,118 +113,98 @@ export default {
     HMfilterDropdown: HMfilterDropdown,
     Card: Card
   },
-  data() {
+  data () {
     return {
-      // screenItems: [
-      //   { current: 0, text: "全部", hasIcon: false },
-      //   { current: 1, text: "销量", hasIcon: false },
-      //   { current: 2, text: "价格", hasIcon: true },
-      //   { current: 3, text: "折扣", hasIcon: false },
-      //   { current: 4, text: "筛选", hasIcon: true }
-      // ],
-      // current: 0,
-      // showRight: false,
-      indexArr: "",
-      valueArr: "",
-      loadingText: "~~到底了~~",
+      indexArr: '',
+      valueArr: '',
+      loadingText: '~~到底了~~',
       filterDropdownValue: [],
       filterData: [],
-      searchText: '',
-	  // goodsList:[
-	  // 	{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
-	  // 	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
-	  // 	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
-	  // 	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
-	  // 	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
-	  // 	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
-	  // 	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
-	  // 	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
-	  // 	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
-	  // 	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
-	  // ],
-    };
+      searchText: ''
+    }
   },
   computed: {
-    goodsList() {
+    goodsList () {
       // 也可以从 getters 获取
-      return this.$store.state.index.list;
+      return this.$store.state.index.list
     },
-	  categoryList(){
-      return this.$store.state.index.categoryList;
-				// newData[0].submenu[0].submenu = categoryList[0].submenu
-				// newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
-				// newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
-				// newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
-				// newData[4].submenu[0] = categoryList[3]
-				this.filterData = newData;
-				// this.filterData = categoryList;
-	  },
+    categoryList () {
+      return this.$store.state.index.categoryList
+    }
   },
   filters: {
-    outData(value) {
-      return JSON.stringify(value);
+    outData (value) {
+      return JSON.stringify(value)
     }
   },
-  onLoad() {
-    store.dispatch('index/category');
+  onLoad () {
+    store.dispatch('index/category')
     // this.getList();
-    store.dispatch('index/list');
+    store.dispatch('index/list')
   },
   methods: {
-    showDrawer(e) {
-      this.$refs[e].open();
+    showDrawer (e) {
+      this.$refs[e].open()
     },
-    getList() {
-      store.dispatch('index/list');
+    getList () {
+      store.dispatch('index/list')
     },
     // search(params) {
     //   this.$store.index.
     // },
-    closeDrawer(e) {
-      this.$refs[e].close();
+    closeDrawer (e) {
+      this.$refs[e].close()
     },
-    change(e, type) {
-      this[type] = e;
+    change (e, type) {
+      this[type] = e
     },
-    onClickItem(e) {
+    onClickItem (e) {
       if (this.current !== e) {
-        this.current = e;
+        this.current = e
       }
     },
-    dropDown() {
-      console.log("下拉");
+    dropDown () {
+      console.log('下拉')
     },
-    searchKey(e) {
-      const { value: keyword } = e.detail;
-      this.keyWords = keyword;
+    searchKey (e) {
+      const { value: keyword } = e.detail
+      this.keyWords = keyword
       store.dispatch('index/search', {
         params: {},
-        keyword,
-      });
+        keyword
+      })
     },
-    //接收菜单结果
-    search(e) {
-      const { on, value, index  } = e;
+    // 接收菜单结果
+    search (e) {
+      const { on, value, selectedData } = e
       let params = {}
-      if(on[0] === 1) {
+      if (on[0] === 1) {
         // 若点击全部
-        this.searchText = '';
-        store.dispatch('index/list');
+        this.searchText = ''
+        store.dispatch('index/list')
       } else {
-        for(let i = 1; i<=on.length; i++){ // on[0]是全部
-          if(on[i] === 1) { // 若该选项被选中
-            params[`${this.categoryList[i].value}`] = value[i][0];
+        for (let i = 1; i <= on.length; i++) { // on[0]是全部
+          if (on[i] === 1) { // 若该选项被选中
+            if (this.categoryList[i].value === 'filter') {
+              console.log('dddd', params, selectedData)
+              params = {
+                ...selectedData,
+                ...params
+              }
+            } else {
+              params[`${this.categoryList[i].value}`] = value[i][0]
+            }
           }
         }
         store.dispatch('index/search', {
-          params, 
+          params,
           keyword: this.keyWords
-        });
+        })
       }
     }
-  },
+  }
 
-};
+}
 </script>
 
 <style lang="scss">
-- 
2.0.0