diff --git a/src/components/CommodityCard/CommodityCard.vue b/src/components/CommodityCard/CommodityCard.vue
index 4ee7115..8143d6f 100644
--- a/src/components/CommodityCard/CommodityCard.vue
+++ b/src/components/CommodityCard/CommodityCard.vue
@@ -77,7 +77,7 @@ image {
 }
 .name {
   width: 92%;
-  height: 54rpx;
+  height: 56rpx;
   padding: 5px 4%;
   display: -webkit-box;
   -webkit-box-orient: vertical;
diff --git a/src/components/HMFilterDropdown/HMFilterDropdown.vue b/src/components/HMFilterDropdown/HMFilterDropdown.vue
index d01799e..69d04ac 100644
--- a/src/components/HMFilterDropdown/HMFilterDropdown.vue
+++ b/src/components/HMFilterDropdown/HMFilterDropdown.vue
@@ -12,7 +12,7 @@
         <view
           class="first-menu"
           :class="{'on':showPage==index || on[index] === 1}"
-          @tap="togglePage(index)"
+          @tap="togglePage(index, false)"
           v-if="!item.isNoPull"
         >
           <text class="name">{{item.name}}</text>
@@ -372,14 +372,14 @@ export default {
       this.$forceUpdate()
     },
     // 菜单开关
-    togglePage (index) {
+    togglePage (index, isRequest = true) {
       if (index === this.showPage) {
-        this.hidePageLayer(true)
+        this.hidePageLayer(true, isRequest)
         this.hideMask()
         this.showPage = -1
       } else {
         if (this.showPage > -1) {
-          this.hidePageLayer(false)
+          this.hidePageLayer(false, isRequest)
         }
         this.showPageLayer(index)
         this.showMask()
@@ -416,14 +416,17 @@ export default {
       })
     },
     // hide菜单页
-    hidePageLayer (isAnimation) {
+    hidePageLayer (isAnimation,isRequset = true) {
       this.triangleDeg[this.showPage] = 0
       const tmpIndex = this.showPage
       if (isAnimation) {
         setTimeout(() => {
           this.pageState.splice(tmpIndex, 1, false)
-        }, 200)
-        this.confirm()
+        }, 200)
+		// debugger
+		if(isRequset){
+			 this.confirm()
+		}
       } else {
         this.pageState.splice(tmpIndex, 1, false)
       }
@@ -812,20 +815,21 @@ export default {
       }
       .labels {
         flex-direction: row;
-        flex-wrap: wrap;
+        flex-wrap: wrap;
+		justify-content: space-between;
         .on {
           border-color: #ff6b4a;
           background-color: #ff6b4a;
           color: #fff;
         }
         > view {
-          width: 148rpx;
+          width: 220rpx;
           height: 30px;
           border: solid 1rpx #adadad;
           border-radius: 2px;
-          margin-right: 15px;
+          margin-right: 2px;
           margin-top: 8px;
-          padding: 0 16rpx;
+          padding: 0 10rpx;
           box-sizing: border-box;
           font-size: 12px;
           flex-direction: row;
diff --git a/src/components/sl-filter/filter-view.vue b/src/components/sl-filter/filter-view.vue
new file mode 100644
index 0000000..e8e49a5
--- /dev/null
+++ b/src/components/sl-filter/filter-view.vue
@@ -0,0 +1,475 @@
+<template>
+
+	<view>
+		<view style="padding: 0px 0px;">
+			<view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
+				<view v-if="item.isSort">
+					<view class="filter-content-list">
+						<view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
+						 :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
+							<text>{{detailItem.title}}</text>
+						</view>
+					</view>
+				</view>
+				<view v-else>
+					<view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
+						<text>{{item.detailTitle}}</text>
+					</view>
+					<view class="filter-content-detail">
+						<text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
+						 @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
+							{{detailItem.title}}
+						</text>
+					</view>
+					<view class="filter-content-footer">
+						<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)">
+							<text>重置</text>
+						</view>
+						<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
+							<text>确定</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				selectArr: [],
+				result: {},
+				menuIndex: 0,
+				selectDetailList: [],
+				independenceObj: {},
+				selectedKey: '',
+				cacheSelectedObj: {},
+				defaultSelectedTitleObj: {}
+			};
+		},
+		props: {
+			themeColor: {
+				type: String,
+				default () {
+					return '#D1372C'
+				}
+			},
+			menuList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			independence: {
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			selectedTitleObj() {
+				let obj = {}
+				for (let i = 0; i < this.menuList.length; i++) {
+					let item = this.menuList[i];
+					obj[item.key] = item.title;
+				}
+				return obj;
+			},
+			defaultSelectedObj() { // 保存初始状态
+				return this.getSelectedObj()
+			},
+			selectedObj: {
+				get() {
+					return this.getSelectedObj()
+				},
+				set(newObj) {
+					return newObj;
+				}
+
+			}
+		},
+		methods: {
+			getSelectedObj() {
+				let obj = {}
+				for (let i = 0; i < this.menuList.length; i++) {
+					let item = this.menuList[i];
+					if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
+
+						if (item.isMutiple) {
+							obj[item.key] = [];
+							item.detailList[0].isSelected = false;
+							if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
+								item.defaultSelectedIndex = [item.defaultSelectedIndex];
+							}
+							for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
+								item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
+								obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
+							}
+
+						} else {
+							obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
+							this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
+							this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
+							item.detailList[0].isSelected = false;
+							item.detailList[item.defaultSelectedIndex].isSelected = true;
+						}
+					} else {
+						if (item.isMutiple) {
+							obj[item.key] = [];
+						} else {
+							obj[item.key] = '';
+						}
+					}
+				}
+				this.result = obj;
+				return obj;
+			},
+			// 重置所有选项，包括默认选项，并更新result
+			resetAllSelect(callback) {
+				let titles = [];
+				for (let i = 0; i < this.menuList.length; i++) {
+					this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
+					titles[this.menuList[i].key] = this.menuList[i].title;
+				}
+				let obj = {
+					'result': this.result,
+					'titles': titles,
+					'isReset': true
+				}
+				this.$emit("confirm", obj);
+				callback(this.result);
+			},
+			// 重置选项为设置的默认值，并更新result
+			resetSelectToDefault(callback) {
+				for (let i = 0; i < this.menuList.length; i++) {
+					this.selectDetailList = this.menuList[i].detailList;
+
+					if (this.menuList[i].defaultSelectedIndex) {
+						if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
+							for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
+								if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
+									this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
+										.menuList[i].key)
+								}
+							}
+						} else {
+							this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
+								i].key)
+						}
+
+						// 获取非默认项的下标
+						let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
+						// 把所有不是默认的为true的点为false
+						for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
+							if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
+								this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
+										.menuList[i].key)
+							}
+						}
+					}
+
+
+				}
+
+				this.selectedObj = this.defaultSelectedObj;
+				this.result = this.defaultSelectedObj;
+				let obj = {
+					'result': this.result,
+					'titles': this.defaultSelectedTitleObj,
+					'isReset': true
+				}
+				this.$emit("confirm", obj);
+				callback(this.result)
+			},
+			getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
+				let tempDefault = menuListItem.defaultSelectedIndex;
+				if (!Array.isArray(tempDefault)) {
+					tempDefault = [tempDefault];
+				}
+				// 获取所有项的下标 组成新的数组
+				let all = [];
+				for (let i = 0; i < menuListItem.detailList.length; i++) {
+					all.push(i)
+				}
+				// 将默认选中的数组与所有项的数组的不同值合并为一个新数组
+				var unDefaultSelectedIndex = tempDefault.filter(function(v) {
+					return !(all.indexOf(v) > -1)
+				}).concat(all.filter(function(v) {
+					return !(tempDefault.indexOf(v) > -1)
+				}));
+				return unDefaultSelectedIndex;
+			},
+			resetMenuList(val) {
+				this.menuList = val;
+				this.$emit('update:menuList', val)
+			},
+			menuTabClick(index) {
+				this.menuIndex = index;
+				this.selectDetailList = this.menuList[index].detailList;
+				this.selectedKey = this.menuList[index].key;
+				// 如果是独立菜单
+				if (this.independence && !this.menuList[index].isSort) {
+					if (JSON.stringify(this.independenceObj) == '{}') {
+						this.initIndependenceObj(index);
+					} else {
+						for (let key in this.independenceObj) {
+							if (key != this.selectedKey) {
+								this.initIndependenceObj(index);
+								this.resetSelected(this.menuList[index].detailList, this.selectedKey);
+							}
+						}
+					}
+
+				}
+				if (this.independence && this.menuList[index].isSort) {
+
+					this.independenceObj = {};
+
+
+				}
+				if (this.independence) {
+					let idx = this.menuList[index].defaultSelectedIndex;
+					if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
+						if (this.menuList[index].isMutiple) {
+							for (let i = 0; i < idx.length; i++) {
+								if (this.menuList[index].detailList[idx[i]].isSelected == false) {
+									this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
+								}
+
+							}
+						} else {
+							if (this.menuList[index].detailList[idx].isSelected == false) {
+
+								this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
+
+							}
+						}
+
+					}
+				}
+
+
+				// #ifdef H5
+				this.selectedObj = this.selectedObj;
+				this.$forceUpdate();
+				// #endif
+			},
+			initIndependenceObj(index) {
+				this.independenceObj = {};
+				if (this.menuList[index].isMutiple) {
+					this.independenceObj[this.selectedKey] = [];
+				} else {
+					this.independenceObj[this.selectedKey] = '';
+				}
+			},
+			itemTap(index, list, isMutiple, key) {
+				if (isMutiple == true) {
+					list[index].isSelected = !list[index].isSelected;
+					if (index == 0) {
+						this.resetSelected(list, key)
+						if (!this.independence) {
+							this.selectedTitleObj[key] = list[index].title;
+						}
+					} else {
+						list[0].isSelected = false
+						if (list[index].isSelected) {
+							if (this.independence) {
+								this.independenceObj[this.selectedKey].push(list[index].value);
+							} else {
+								this.selectedObj[key].push(list[index].value);
+							}
+						} else {
+							list[index].isSelected = false;
+							if (this.independence) {
+								var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
+								this.independenceObj[this.selectedKey].splice(idx, 1);
+							} else {
+								var idx = this.selectedObj[key].indexOf(list[index].value);
+								this.selectedObj[key].splice(idx, 1);
+							}
+
+						}
+						if (this.independence) {
+							this.result = this.independenceObj;
+						} else {
+							this.result = this.selectedObj;
+						}
+
+					}
+				} else {
+					if (index == 0) {
+						this.resetSelected(list, key)
+						if (!this.independence) {
+							this.selectedTitleObj[key] = list[index].title;
+						}
+					} else {
+						list[0].isSelected = false
+						if (this.independence) {
+							this.independenceObj[this.selectedKey] = list[index].value;
+							this.result = this.independenceObj;
+						} else {
+							this.selectedObj[key] = list[index].value;
+							this.result = this.selectedObj;
+							this.selectedTitleObj[key] = list[index].title;
+						}
+
+						for (let i = 0; i < list.length; i++) {
+							if (index == i) {
+								list[i].isSelected = true
+							} else {
+								list[i].isSelected = false
+							}
+						}
+					}
+				}
+				// #ifdef H5
+				this.$forceUpdate();
+				// #endif
+			},
+			resetSelected(list, key) {
+				if (typeof this.result[key] == 'object') {
+					this.result[key] = [];
+					this.selectedTitleObj[key] = list[0].title;
+				} else {
+					this.result[key] = '';
+					this.selectedTitleObj[key] = list[0].title;
+				}
+				for (let i = 0; i < list.length; i++) {
+					if (i == 0) {
+						list[i].isSelected = true;
+					} else {
+						list[i].isSelected = false;
+					}
+				}
+				// #ifdef H5
+				this.$forceUpdate();
+				// #endif
+			},
+			sortTap(index, list, key) {
+				if (this.independence) {
+					this.independenceObj[this.selectedKey] = list[index].value;
+					this.result = this.independenceObj;
+				} else {
+					this.selectedObj[key] = list[index].value;
+					this.result = this.selectedObj;
+					this.selectedTitleObj[key] = list[index].title;
+				}
+
+				for (let i = 0; i < list.length; i++) {
+					if (index == i) {
+						list[i].isSelected = true;
+					} else {
+						list[i].isSelected = false;
+					}
+				}
+				let obj = {
+					'result': this.result,
+					'titles': this.selectedTitleObj,
+					'isReset': false
+				}
+				this.$emit("confirm", obj);
+			},
+			sureClick() {
+				let obj = {
+					'result': this.result,
+					'titles': this.selectedTitleObj,
+					'isReset': false
+				}
+				this.$emit("confirm", obj);
+			},
+			resetClick(list, key) {
+				this.resetSelected(list, key)
+			}
+		}
+	}
+</script>
+
+<style>
+	.filter-content {
+		background-color: #F6F7F8;
+	}
+
+	.filter-content-title {
+		border-bottom: #EEEEEE 1px solid;
+		padding: 10px 15px;
+		font-size: 13px;
+		color: #999999;
+	}
+
+	.filter-content-detail {
+		padding: 5px 15px;
+	}
+
+	.filter-content-detail-item-active {
+		background-color: #D1372C;
+		color: #FFFFFF;
+		padding: 5px 15px;
+		border-radius: 20px;
+		margin-right: 10px;
+		margin-top: 10px;
+		display: inline-block;
+		font-size: 14px;
+	}
+
+	.filter-content-detail-item-default {
+		background-color: #FFFFFF;
+		color: #666666;
+		padding: 5px 15px;
+		border-radius: 20px;
+		margin-right: 10px;
+		margin-top: 10px;
+		display: inline-block;
+		font-size: 14px;
+	}
+
+	.filter-content-footer {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 45px;
+		margin-top: 10px;
+	}
+
+	.filter-content-footer-item {
+		width: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 16px;
+	}
+
+	.filter-content-list {
+
+		padding: 5px 15px;
+	}
+
+	.filter-content-list-item-default {
+		color: #666666;
+		width: 100%;
+		padding: 10px 0px;
+	}
+
+	.filter-content-list-item-default text {
+		width: 90%;
+		font-size: 14px;
+		display: inline-block;
+	}
+
+	.filter-content-list-item-active {
+		color: #D1372C;
+		width: 100%;
+		padding: 10px 0px;
+	}
+
+	.filter-content-list-item-active text {
+		font-size: 14px;
+		width: 90%;
+		display: inline-block;
+	}
+
+	.filter-content-list-item-active:after {
+		content: '✓';
+	}
+</style>
diff --git a/src/components/sl-filter/iconfont/iconfont.css b/src/components/sl-filter/iconfont/iconfont.css
new file mode 100644
index 0000000..56b06be
--- /dev/null
+++ b/src/components/sl-filter/iconfont/iconfont.css
@@ -0,0 +1,20 @@
+@font-face {
+	font-family: 'sl-font';
+	src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
+}
+
+.sl-font {
+	font-family: "sl-font" !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.sl-down:before {
+	content: "\e61a";
+}
+
+.sl-up:before {
+	content: "\e61c";
+}
diff --git a/src/components/sl-filter/popup-layer.vue b/src/components/sl-filter/popup-layer.vue
new file mode 100755
index 0000000..7f8e3cf
--- /dev/null
+++ b/src/components/sl-filter/popup-layer.vue
@@ -0,0 +1,122 @@
+<template>
+	<scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
+		<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
+			<slot></slot>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		name: 'popup-layer',
+		props: {
+			direction: {
+				type: String,
+				default: 'top', // 方向  top，bottom，left，right 
+			},
+			autoClose: {
+				type: Boolean,
+				default: true,
+			},
+			isTransNav: {
+				type: Boolean,
+				default: false
+			},
+			navHeight: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				ifshow: false, // 是否展示,
+				translateValue: -100, // 位移距离
+				timer: null,
+				iftoggle: false,
+			};
+		},
+		computed: {
+			_translate() {
+				if (this.isTransNav) {
+					const transformObj = {
+						'top': `transform:translateY(${-this.translateValue}%)`,
+						'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
+						'left': `transform:translateX(${-this.translateValue}%)`,
+						'right': `transform:translateX(${this.translateValue}%)`
+					};
+					return transformObj[this.direction]
+				} else {
+					const transformObj = {
+						'top': `transform:translateY(${-this.translateValue}%)`,
+						'bottom': `transform:translateY(${this.translateValue}%)`,
+						'left': `transform:translateX(${-this.translateValue}%)`,
+						'right': `transform:translateX(${this.translateValue}%)`
+					};
+					return transformObj[this.direction]
+				}
+
+			},
+			_location() {
+				const positionValue = {
+					'top': 'bottom:0px;width:100%;',
+					'bottom': 'top:0px;width:100%;',
+					'left': 'right:0px;height:100%;',
+					'right': 'left:0px;height:100%;',
+				};
+				return positionValue[this.direction] + this._translate;
+			}
+		},
+		methods: {
+			show() {
+				let _this = this;
+				this.ifshow = true;
+				let _open = setTimeout(() => {
+					this.translateValue = 0;
+					_open = null;
+				}, 100)
+				let _toggle = setTimeout(() => {
+					this.iftoggle = true;
+					_toggle = null;
+				}, 300);
+			},
+			close() {
+				if (this.timer !== null || !this.iftoggle) {
+					return;
+				}
+				this.translateValue = -100 - this.navHeight;
+
+				this.timer = setTimeout(() => {
+					this.ifshow = false;
+					this.timer = null;
+					this.iftoggle = false;
+				}, 300);
+				this.$emit("close")
+			},
+			ableClose() {
+				if (this.autoClose) {
+					this.close();
+				}
+			},
+			stopEvent(event) {},
+		}
+	}
+</script>
+
+<style>
+	.popup-layer {
+		position: absolute;
+		z-index: 999999;
+		background: rgba(0, 0, 0, .3);
+		height: calc(100% - 50px);
+		width: 100%;
+		left: 0px;
+		overflow: hidden;
+	}
+
+	.popup-content {
+		position: absolute;
+		z-index: 1000000;
+		background: #FFFFFF;
+		transition: all .3s ease;
+	}
+</style>
diff --git a/src/components/sl-filter/sl-filter.vue b/src/components/sl-filter/sl-filter.vue
new file mode 100644
index 0000000..8ab8239
--- /dev/null
+++ b/src/components/sl-filter/sl-filter.vue
@@ -0,0 +1,317 @@
+<template>
+	<view class="content">
+		<view :style="{height: tabHeight + 1 +'px'}">
+			<view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
+				<view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
+					<text :style="{color:color}">{{item.title}}</text>
+					<text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
+				</view>
+			</view>
+		</view>
+		<popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
+		 :tabHeight="tabHeight">
+			<sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
+			 ref="slFilterView" @confirm="filterResult"></sl-filter-view>
+		</popup-layer>
+	</view>
+
+</template>
+
+<script>
+	import popupLayer from '@/components/sl-filter/popup-layer.vue';
+	import slFilterView from '@/components/sl-filter/filter-view.vue';
+	export default {
+		components: {
+			popupLayer,
+			slFilterView
+		},
+		props: {
+			menuList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			themeColor: {
+				type: String,
+				default () {
+					return '#000000'
+				}
+			},
+			color: {
+				type: String,
+				default () {
+					return '#666666'
+				}
+			},
+			independence: {
+				type: Boolean,
+				default: false
+			},
+			isTransNav: {
+				type: Boolean,
+				default: false
+			},
+			navHeight: {
+				type: Number,
+				default: 0
+			},
+			topFixed: {
+				type: Boolean,
+				default: false
+			}
+		},
+
+		computed: {
+			itemWidth() {
+				return 'calc(100%/2)'
+			},
+			menuListTemp: {
+				get() {
+					return this.getMenuListTemp();
+				},
+				set(newObj) {
+					return newObj;
+				}
+			}
+		},
+		// #ifndef H5
+		onReady: function() {
+			let arr = [];
+			let titleArr = [];
+			let r = {};
+			for (let i = 0; i < this.menuList.length; i++) {
+				arr.push({
+					'isActive': false
+				});
+				// titleArr.push({
+				// 	'title': this.menuList[i].title,
+				// 	'key': this.menuList[i].key
+				// })
+
+				r[this.menuList[i].key] = this.menuList[i].title;
+
+				if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
+					titleArr.push({
+						'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
+						'key': this.menuList[i].key
+					})
+				} else {
+					titleArr.push({
+						'title': this.menuList[i].title,
+						'key': this.menuList[i].key
+					})
+				}
+
+			}
+			this.statusList = arr;
+			this.titleList = titleArr;
+			this.tempTitleObj = r;
+		},
+		// #endif
+
+		// #ifdef H5
+		created: function() {
+			let arr = [];
+			let titleArr = [];
+			let r = {};
+			for (let i = 0; i < this.menuList.length; i++) {
+				arr.push({
+					'isActive': false
+				});
+				// titleArr.push({
+				// 	'title': this.menuList[i].title,
+				// 	'key': this.menuList[i].key
+				// });
+				r[this.menuList[i].key] = this.menuList[i].title;
+
+				if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
+					titleArr.push({
+						'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
+						'key': this.menuList[i].key
+					})
+				} else {
+					titleArr.push({
+						'title': this.menuList[i].title,
+						'key': this.menuList[i].key
+					})
+				}
+
+			}
+			this.statusList = arr;
+			this.titleList = titleArr;
+			this.tempTitleObj = r;
+		},
+		// #endif
+		data() {
+			return {
+				down: 'sl-down',
+				up: 'sl-up',
+				tabHeight: 50,
+				statusList: [],
+				selectedIndex: '',
+				titleList: [],
+				tempTitleObj: {}
+			};
+		},
+		methods: {
+			getMenuListTemp() {
+				let arr = this.menuList;
+				for (let i = 0; i < arr.length; i++) {
+					let item = arr[i];
+					for (let j = 0; j < item.detailList.length; j++) {
+						let d_item = item.detailList[j];
+						if (j == 0) {
+							d_item.isSelected = true
+						} else {
+							d_item.isSelected = false
+						}
+					}
+				}
+				return arr;
+			},
+			// 重置所有选项，包括默认选项，并更新result
+			resetAllSelect(callback) {
+				this.$refs.slFilterView.resetAllSelect(function(e){
+					callback(e);
+				});
+			},
+			// 重置选项为设置的默认值，并更新result
+			resetSelectToDefault(callback) {
+				this.$refs.slFilterView.resetSelectToDefault(function(e){
+					callback(e);
+				});
+			},
+			resetMenuList(val) {
+				this.menuList = val;
+				this.$emit('update:menuList', val)
+				this.$forceUpdate();
+				this.$refs.slFilterView.resetMenuList(val)
+			},
+			showMenuClick(index) {
+				this.selectedIndex = index;
+				if (this.statusList[index].isActive == true) {
+					this.$refs.popupRef.close();
+					this.statusList[index].isActive = false
+				} else {
+					this.menuTabClick(index);
+					this.$refs.popupRef.show()
+				}
+			},
+			menuTabClick(index) {
+				this.$refs.slFilterView.menuTabClick(index);
+				for (let i = 0; i < this.statusList.length; i++) {
+					if (index == i) {
+						this.statusList[i].isActive = true;
+					} else {
+						this.statusList[i].isActive = false;
+					}
+				}
+			},
+			filterResult(obj) {
+				let val = obj.result;
+				let titlesObj = obj.titles;
+				// 处理选项映射到菜单title
+				if (this.independence) {
+					if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
+						let tempTitle = '';
+						for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
+							let item = this.menuList[this.selectedIndex].detailList[i];
+							if (item.value == val[this.menuList[this.selectedIndex].key]) {
+								tempTitle = item.title;
+							}
+						}
+						if (this.menuList[this.selectedIndex].reflexTitle) {
+							this.titleList[this.selectedIndex].title = tempTitle;
+						}
+					}
+				} else {
+					for (let key in titlesObj) {
+						if (!Array.isArray(titlesObj[key])) {
+							this.tempTitleObj[key] = titlesObj[key];
+						}
+
+					}
+					for (let key in this.tempTitleObj) {
+						for (let i = 0; i < this.titleList.length; i++) {
+							if (this.titleList[i].key == key) {
+								this.titleList[i].title = this.tempTitleObj[key];
+							}
+						}
+					}
+				}
+
+				this.$refs.popupRef.close()
+				if (obj.isReset) {
+					
+				} else{
+					this.$emit("result", val)
+				}
+				
+
+			},
+			close() {
+				for (let i = 0; i < this.statusList.length; i++) {
+					this.statusList[i].isActive = false;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import 'iconfont/iconfont.css';
+	// .content{
+	// 	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;
+	// 	}
+	// }
+	.select-tab {
+		border-bottom: #F7F7F7 1px solid;
+		background-color: #FFFFFF;
+		display: flex;
+		width: 100%;
+	}
+
+	.select-tab-fixed-top {
+		border-bottom: #F7F7F7 1px solid;
+		background-color: #FFFFFF;
+		display: flex;
+		width: 100%;
+		position: fixed;
+		/* #ifdef H5 */
+		top: 44px;
+		/* #endif */
+		/* #ifndef H5 */
+		top: 0;
+		/* #endif */
+	}
+
+	.arrows {
+		margin-left: 5px;
+	}
+
+	.select-tab .select-tab-item,
+	.select-tab-fixed-top .select-tab-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.select-tab .select-tab-item text,
+	.select-tab-fixed-top .select-tab-item text {
+		color: #666666;
+		font-size: 14px;
+	}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index ba6aad8..d2cd58e 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -106,8 +106,8 @@
             </view>
           </view>
           <view class="loading-text">
-            <text>{{loadedText}}</text>
-            <!-- <text v-else>{{loadedText}}</text> -->
+            <text v-if="isLoading==true">{{loadingText}}</text>
+            <text v-else>{{loadedText}}</text>
           </view>
         </view>
         <!-- </scroll-view> -->
@@ -140,7 +140,7 @@ export default {
       valueArr: "",
       isLoading: true, //初始化加载状态
       loadingText: "data loading...",
-      loadedText: "~~到底啦~~",
+      loadedText: "~~暂无更多数据~~",
       filterDropdownValue: [],
       filterData: [],
       searchText: "",
@@ -158,7 +158,12 @@ export default {
     goodsList() {
       // 也可以从 getters 获取
       // console.log('index-list=====>',this.$store.state.index.list)
-      return this.$store.state.index.list;
+      let list =  this.$store.state.index.list;
+	  if(list.length == 0){
+		 this.isLoading = false;
+	  }
+	  this.scrollTop = 0.1;
+	  return list
     },
     categoryList() {
       return this.$store.state.index.categoryList;
@@ -260,7 +265,6 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #f7f6f6;
 }
 .header {
   display: flex;
diff --git a/src/store/modules/index.js b/src/store/modules/index.js
index d16ecb5..cf272d4 100644
--- a/src/store/modules/index.js
+++ b/src/store/modules/index.js
@@ -16,6 +16,350 @@ initArr.forEach(function (value) {
 	list.push(initData)
 });	
 
+let categoryList  =  [
+        {
+            "type": "checkbox",
+            "name": "产品",
+            "value": "category",
+            "submenu": [
+                {
+                    "label": "镜框",
+                    "name": "镜框",
+                    "value": "1"
+                },
+                {
+                    "label": "镜片",
+                    "name": "镜片",
+                    "value": "2"
+                },
+                {
+                    "label": "特种镜",
+                    "name": "特种镜",
+                    "value": "146"
+                }
+            ],
+            "groups": [
+                "001"
+            ]
+        },
+        {
+            "type": "radio",
+            "name": "规则",
+            "value": "px",
+            "submenu": [
+                {
+                    "name": "按价格排",
+                    "value": "1"
+                },
+                {
+                    "name": "按销量排",
+                    "value": "2"
+                }
+            ],
+            "groups": [
+                "002"
+            ]
+        },
+        {
+            "type": "radio",
+            "name": "排序",
+            "value": "sort",
+            "submenu": [
+                {
+                    "name": "从高到低",
+                    "value": "1"
+                },
+                {
+                    "name": "从低到高",
+                    "value": "2"
+                }
+            ],
+            "groups": [
+                "003"
+            ]
+        },
+        {
+            "type": "filter",
+            "name": "筛选",
+            "value": "filter",
+            "submenu": [
+                {
+                    "type": "checkbox",
+                    "name": "性别",
+                    "value": "sex",
+                    "submenu": [
+                        {
+                            "label": "男性",
+                            "name": "男性",
+                            "value": "27"
+                        },
+                        {
+                            "label": "女性",
+                            "name": "女性",
+                            "value": "28"
+                        }
+                    ]
+                },
+                {
+                    "type": "checkbox",
+                    "name": "年龄",
+                    "value": "age",
+                    "submenu": [
+                        {
+                            "label": "通用",
+                            "name": "通用",
+                            "value": "24"
+                        }
+                    ]
+                },
+                {
+                    "type": "checkbox",
+                    "name": "适用场景",
+                    "value": "sense",
+                    "submenu": [
+                        {
+                            "label": "行政风",
+                            "name": "行政风",
+                            "value": "53"
+                        },
+                        {
+                            "label": "青春学子风",
+                            "name": "青春学子风",
+                            "value": "54"
+                        },
+                        {
+                            "label": "运动风",
+                            "name": "运动风",
+                            "value": "55"
+                        },
+                        {
+                            "label": "简约-极简文艺范",
+                            "name": "简约-极简文艺范",
+                            "value": "56"
+                        },
+                        {
+                            "label": "奶奶风",
+                            "name": "奶奶风",
+                            "value": "57"
+                        },
+                        {
+                            "label": "流线洛可可",
+                            "name": "流线洛可可",
+                            "value": "58"
+                        },
+                        {
+                            "label": "自然舒视角",
+                            "name": "自然舒视角",
+                            "value": "59"
+                        },
+                        {
+                            "label": "无界人文系",
+                            "name": "无界人文系",
+                            "value": "60"
+                        },
+                        {
+                            "label": "有机未来时",
+                            "name": "有机未来时",
+                            "value": "61"
+                        },
+                        {
+                            "label": "立体巴洛克",
+                            "name": "立体巴洛克",
+                            "value": "62"
+                        },
+                        {
+                            "label": "多元新风尚",
+                            "name": "多元新风尚",
+                            "value": "63"
+                        },
+                        {
+                            "label": "理性几何派",
+                            "name": "理性几何派",
+                            "value": "64"
+                        },
+                        {
+                            "label": "轻简北欧风",
+                            "name": "轻简北欧风",
+                            "value": "65"
+                        },
+                        {
+                            "label": "质感哥特潮",
+                            "name": "质感哥特潮",
+                            "value": "66"
+                        },
+                        {
+                            "label": "时尚",
+                            "name": "时尚",
+                            "value": "67"
+                        },
+                        {
+                            "label": "复古",
+                            "name": "复古",
+                            "value": "68"
+                        },
+                        {
+                            "label": "商务",
+                            "name": "商务",
+                            "value": "69"
+                        },
+                        {
+                            "label": "休闲",
+                            "name": "休闲",
+                            "value": "70"
+                        },
+                        {
+                            "label": "折射率",
+                            "name": "折射率",
+                            "value": "285"
+                        }
+                    ]
+                },
+                {
+                    "type": "checkbox",
+                    "name": "价格",
+                    "value": "price",
+                    "submenu": [
+                        {
+                            "name": "100以下",
+                            "value": "1,100"
+                        },
+                        {
+                            "name": "100-300",
+                            "value": "100,300"
+                        },
+                        {
+                            "name": "300-1000",
+                            "value": "300,1000"
+                        },
+                        {
+                            "name": "1000以上",
+                            "value": "1000,-1"
+                        }
+                    ]
+                },
+                {
+                    "type": "checkbox",
+                    "name": "材质",
+                    "value": "glasscate",
+                    "submenu": [
+                        {
+                            "label": "购易",
+                            "name": "购易",
+                            "value": "72"
+                        },
+                        {
+                            "label": "海俪恩",
+                            "name": "海俪恩",
+                            "value": "73"
+                        },
+                        {
+                            "label": "沙漠风暴",
+                            "name": "沙漠风暴",
+                            "value": "74"
+                        },
+                        {
+                            "label": "古诗",
+                            "name": "古诗",
+                            "value": "75"
+                        },
+                        {
+                            "label": "暴龙",
+                            "name": "暴龙",
+                            "value": "76"
+                        },
+                        {
+                            "label": "犀牛",
+                            "name": "犀牛",
+                            "value": "77"
+                        },
+                        {
+                            "label": "Ray-Ban雷朋",
+                            "name": "Ray-Ban雷朋",
+                            "value": "78"
+                        },
+                        {
+                            "label": "PARIM派丽蒙",
+                            "name": "PARIM派丽蒙",
+                            "value": "79"
+                        },
+                        {
+                            "label": "石狼",
+                            "name": "石狼",
+                            "value": "80"
+                        },
+                        {
+                            "label": "木九十",
+                            "name": "木九十",
+                            "value": "81"
+                        }
+                    ]
+                },
+                {
+                    "type": "checkbox",
+                    "name": "品牌",
+                    "value": "brand",
+                    "submenu": [
+                        {
+                            "label": "购易",
+                            "name": "购易",
+                            "value": "72"
+                        },
+                        {
+                            "label": "海俪恩",
+                            "name": "海俪恩",
+                            "value": "73"
+                        },
+                        {
+                            "label": "沙漠风暴",
+                            "name": "沙漠风暴",
+                            "value": "74"
+                        },
+                        {
+                            "label": "古诗",
+                            "name": "古诗",
+                            "value": "75"
+                        },
+                        {
+                            "label": "暴龙",
+                            "name": "暴龙",
+                            "value": "76"
+                        },
+                        {
+                            "label": "犀牛",
+                            "name": "犀牛",
+                            "value": "77"
+                        },
+                        {
+                            "label": "Ray-Ban雷朋",
+                            "name": "Ray-Ban雷朋",
+                            "value": "78"
+                        },
+                        {
+                            "label": "PARIM派丽蒙",
+                            "name": "PARIM派丽蒙",
+                            "value": "79"
+                        },
+                        {
+                            "label": "石狼",
+                            "name": "石狼",
+                            "value": "80"
+                        },
+                        {
+                            "label": "木九十",
+                            "name": "木九十",
+                            "value": "81"
+                        }
+                    ]
+                }
+            ],
+            "groups": [
+                "001",
+                "002",
+                "003"
+            ],
+			}
+		]
+
 //初始化数据是为了显示默认骨架
  const state = {
    categoryList: [],
@@ -52,7 +396,6 @@ initArr.forEach(function (value) {
          });
          commit('CATEGORY', data);
 		 resolve(data)
-		 console.log('3333')
        },
        fail: (res) => {
          console.log("fail status === > ", res);
@@ -67,8 +410,7 @@ initArr.forEach(function (value) {
        url: shopList,
        success: (res) => {
          commit('LIST', res.data.data)
-		  resolve(res.data)
-		  console.log('3333')
+		 resolve(res.data)
        },
        fail: (res) => {
          console.log("fail status === > ", res);