T

addons/theme/stv1/_static_w3g/css/common.css

@@ -415,6 +415,22 @@ div::-webkit-scrollbar {
 	color:rgba(101,192,0,1);
 }
 
+.selected_condition_container {
+	padding-top: 0.5rem;
+	padding-left: 0.75rem;
+	padding-right: 0.25rem;
+}
+
+.selected_condition {
+	min-width: 5rem;
+	padding: 0.4375rem 1.1875rem;
+	height: 2rem;
+	background:rgba(251,255,247,1);
+	border-radius: 1rem;
+	margin-right: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
 .popup_top_button {
 	display: flex;
 	flex-direction: row;

addons/theme/stv1/_static_w3g/js/extension.js

@@ -8,4 +8,133 @@ String.prototype.isCode = function() {
 	
 String.prototype.isPwd = function() {
 	return this.length >= 6 && this.length <= 18
+}
+
+Array.prototype.hx_concat = function(mark) {
+  return this.reduce((v, e) => {
+      if (e == undefined || e.toString().length == 0) {
+        return v
+      }
+      return v.length == 0 ? e.toString() : (v + mark + e.toString())
+    },
+    '')
+}
+
+Array.prototype.hx_forEach = function(call) {
+  for (var i = 0; i < this.length; i++) {
+    call(this[i])
+  }
+}
+
+Array.prototype.hx_forEachIndex = function(call) {
+  for (var i = 0; i < this.length; i++) {
+    call(this[i], i)
+  }
+}
+
+Array.prototype.hx_map = function(map) {
+  var newArray = []
+  this.hx_forEach(function(e) {
+    newArray.push(map(e))
+  })
+  return newArray
+}
+
+Array.prototype.hx_mapIndex = function(map) {
+  var newArray = []
+  for (var i = 0; i < this.length; i++) {
+    newArray.push(map(this[i], i))
+  }
+  return newArray
+}
+
+Array.prototype.hx_filterMap = function(map, filter) {
+  var newArray = []
+  this.hx_forEach(function(e) {
+    if (filter(e)) {
+      newArray.push(map(e))
+    }
+  })
+  return newArray
+}
+
+Array.prototype.hx_pushIf = function(value, checker) {
+  if (checker !== undefined && checker(value)) {
+    this.push(value)
+  }
+  return this
+}
+
+Array.prototype.hx_convertPushIf = function(converter, checker, value) {
+  if(converter && checker && checker(value)) {
+    this.push(converter(value))
+  }
+  return this
+}
+
+Array.prototype.hx_firstOf = function(checker) {
+  if (checker !== undefined) {
+    for (var i = 0; i < this.length; i++) {
+      var e = this[i]
+      if (checker(e)) {
+        return e
+      }
+    }
+  }
+  return undefined
+}
+
+Array.prototype.hx_firstOfKey = function(v, k) {
+  return this.hx_firstOf(r => {
+    return r[k] == v
+  })
+}
+
+Array.prototype.hx_indexOf = function(checker) {
+  if (checker !== undefined) {
+    for (var i = 0; i < this.length; i++) {
+      var e = this[i]
+      if (checker(e)) {
+        return i
+      }
+    }
+  }
+  return -1
+}
+
+Array.prototype.hx_indexOfKey = function(v, k) {
+  return this.hx_indexOf(r => {
+    return r[k] == v
+  })
+}
+
+Array.prototype.hx_filter = function(filter) {
+  if (filter !== undefined) {
+    var newArray = []
+    this.hx_forEach(function(e) {
+      if (filter(e)) {
+        newArray.push(e)
+      }
+    })
+    return newArray
+  }
+  return this
+}
+
+Array.prototype.hx_swap = function(r, l, handler) {
+  var length = this.length
+  if (r >= 0 && l >= 0 && r < length && l < length) {
+    var p = this[r]
+    var q = this[l]
+    if (handler !== undefined) {
+      handler(p, q)
+    }
+    this[r] = this.splice(l, 1, this[r])[0]
+    console.log(this[r])
+    console.log(this)
+  }
+}
+
+Array.prototype.hx_lastIndex = function() {
+  return this.length > 0 ? this.length - 1 : 0
 }
\ No newline at end of file

apps/course/Tpl/default/Video/index_w3g.html

@@ -40,9 +40,9 @@
 					<div class="layout_v" style="width: 100vw">
 						<span class="all_category_title text_16_600 color_333333">分类</span>
 						<div class="drop_down_grid">
-							<div @click="onCategory('')" class="van-ellipsis" :class="selectedCategory('') ? 'drop_down_option_selected' : 'drop_down_option'">全部</div>
+							<div @click="onCategory('', '')" class="van-ellipsis" :class="selectedCategory('') ? 'drop_down_option_selected' : 'drop_down_option'">全部</div>
 							<volist name="selCate" id="top">
-								<div @click="onCategory('{$top['id']}')" class="van-ellipsis" :class="selectedCategory('{$top['id']}') ? 'drop_down_option_selected' : 'drop_down_option'">{$top.title}</div>
+								<div @click="onCategory('{$top['id']}', '{$top.title}')" class="van-ellipsis" :class="selectedCategory('{$top['id']}') ? 'drop_down_option_selected' : 'drop_down_option'">{$top.title}</div>
 							</volist>
 						</div>
 						<span class="all_category_title text_16_600 color_333333">讲师</span>
@@ -51,9 +51,9 @@
 						</div>
 						<span class="all_category_title text_16_600 color_333333">状态</span>
 						<div class="drop_down_grid">
-							<div @click="onBuy('')" class="van-ellipsis" :class="selectedBuy('') ? 'drop_down_option_selected' : 'drop_down_option'">全部</div>
-							<div @click="onBuy('1')" class="van-ellipsis" :class="selectedBuy('1') ? 'drop_down_option_selected' : 'drop_down_option'">已购买</div>
-							<div @click="onBuy('2')" class="van-ellipsis" :class="selectedBuy('2') ? 'drop_down_option_selected' : 'drop_down_option'">未购买</div>
+							<div @click="onBuy('', '')" class="van-ellipsis" :class="selectedBuy('') ? 'drop_down_option_selected' : 'drop_down_option'">全部</div>
+							<div @click="onBuy('1', '已购买')" class="van-ellipsis" :class="selectedBuy('1') ? 'drop_down_option_selected' : 'drop_down_option'">已购买</div>
+							<div @click="onBuy('2', '未购买')" class="van-ellipsis" :class="selectedBuy('2') ? 'drop_down_option_selected' : 'drop_down_option'">未购买</div>
 						</div>
 						<span class="all_category_title text_16_600 color_333333">价格区间</span>
 						<div all-range-input class="layout_h">
@@ -62,13 +62,19 @@
 							<van-field class="all_range_input" v-model="maxPrice" type="number" input-align="center" placeholder="最高价" ></van-field>
 						</div>
 						<div class="two_button_container layout_h" style="margin-top: 2.5rem;">
-							<div class="two_button_left">重置</div>
-							<div class="two_button_right">确认</div>
+							<div @click="onReset" class="two_button_left">重置</div>
+							<div @click="onSure" class="two_button_right">确认</div>
 						</div>
 					</div>
 			  </van-dropdown-item>
 			</van-dropdown-menu>
+			<div class="selected_condition_container">
+				<div v-for="(con, idx) in selected" :key="idx" class="selected_condition text_14_400 color_primary">
+					<span class="self_center">con.title</span>
+				</div>
+			</div>
 		</van-sticky>
+		
 	</div>
 </div>
 <!--选择价格区间弹框-->
@@ -265,36 +271,72 @@
 				cate: "",
 				buy: "",
 				minPrice: "",
-				maxPrice: ""
+				maxPrice: "",
+				conditions: [],
+				selected: []
 			}
 		},
 		computed: {
+			
 			selectedCategory: function() {
 				let cate = this.cate
 				return function(c) {
 					return c == cate
 				}
 			},
+			
 			selectedBuy: function() {
 				let buy = this.buy
 				return function(c) {
 					return c == buy
 				}
-			}
+			},
+			
 		},
 		created: function(){
 			document.title = "全部真题"
 		},
 		methods: {
 			
-			onCategory: function(id) {
+			//Helper
+			onCondition: function(id, title, key) {
+				if(id.length == 0) {
+					let idx = this.conditions.hx_indexOf( r => { return r.type == key })
+					if(idx != -1) {
+						this.conditions.splice(idx, 1)
+					}
+				} else {
+					let condition = {
+						type: key,
+						id: id,
+						title: title
+					}
+					let idx = this.conditions.hx_indexOf( r => { return r.id == id })
+					if(idx == -1) {
+						this.conditions.push(condition)
+					}
+				}
+			},
+			
+			onCategory: function(id, title) {
+				this.onCondition('category')
 				this.cate = id
 			},
 			
-			onBuy: function(type) {
+			onBuy: function(type, title) {
+				this.onCondition('buy')
 				this.buy = type
 			},
 			
+			onSure: function() {
+				this.selected = this.conditions
+			},
+			
+			onReset: function() {
+				this.onCategory('', '')
+				this.onBuy('', '')
+			}
+			
 		}
 	})