sph---排序模块的实现

<div class="navbar-inner filter">
							<!-- 排序的结构 -->
							<ul class="sui-nav">
								<!-- 判断谁应该有类名  通过判断searchParams.order属性值中是否包含1(综合)来实现 -->
								<li :class="{ active: isOne }" @click="changeOrder('1')">
									<a
										>综合<span
											v-if="isOne"
											class="iconfont"
											:class="{
												'icon-down': isDesc,
												'icon-up': isAsc,
											}"
										></span
									></a>
								</li>
								<!-- 判断谁应该有类名  通过判断searchParams.order属性值中是否包含2(价格)来实现 -->
								<li :class="{ active: isTwo }" @click="changeOrder('2')">
									<a
										>价格<span
											v-if="isTwo"
											class="iconfont"
											:class="{
												'icon-down': isDesc,
												'icon-up': isAsc,
											}"
										></span
									></a>
								</li>
							</ul>
						</div>

<script>
	import SearchSelector from "./SearchSelector";

	export default {
		name: "Search",
		components: {
			SearchSelector,
		},
		data() {
			return {
				// 带给服务器的参数
				searchParams: {
					// 一级分类id
					category1Id: "",
					// 二级分类id
					category2Id: "",
					// 三级分类id
					category3Id: "",
					// 分类名字
					categoryName: "",
					// 搜索关键字
					keyword: "",
					// 排序(初始状态是综合且降序)
					order: "1:desc",
					// 分页器用的，代表定期那是第几页
					pageNo: 1,
					// 每一页展示产品个数
					pageSize: 5,
					// 产品属性操作带的参数
					props: [],
					// 品牌
					trademark: "",
				},
			};
		},
		// 计算属性
		computed: {
			// mapGetters里面的写法：传递的是一个数组，因为getters计算属性是没有划分模块的(没有划分home、search模块)，只要里面有goodsList这个属性，就能直接获取到
			...mapGetters(["goodsList"]),
			isOne() {
				return this.searchParams.order.indexOf("1") != -1;
			},
			isTwo() {
				return this.searchParams.order.indexOf("2") != -1;
			},
			isAsc() {
				return this.searchParams.order.indexOf("asc") != -1;
			},
			isDesc() {
				return this.searchParams.order.indexOf("desc") != -1;
			},
		},
		methods: {
            // 发请求，获取search模块数据(根据参数不同，返回不同数据)
			// 把这次请求封装为一个函数，在需要的时候调用即可
			getSearchData() {
				// 派发action  通知Vuex发请求，获取搜索模块的数据，存储在仓库中
				this.$store.dispatch("getSearchList", this.searchParams);
			},
			// 排序的操作
			//flag形参(用户点击时传递进来的)，它是一个标记，代表用户点击的是综合(1)还是价格(2)
			changeOrder(flag) {
				// 获取order原始状态 "1:desc"
				let orginOrder = this.searchParams.order;
				let orginOrderFlag = orginOrder.split(":")[0]; //原始是综合还是排序
				let orginOrderSort = orginOrder.split(":")[1]; //原始排序状态
				// 定义一个新的order
				let newOrder = "";
				// 判断用户多次点击的是不是同一个按钮
				if (flag == orginOrderFlag) {
					newOrder = `${orginOrderFlag}:${orginOrderSort == "desc" ? "asc" :"desc"}`;
				} else {
					// 用户多次点击的不是同一个按钮
					newOrder = `${flag}:${"desc"}`;
				}
				//将新的newOrder赋给order
				this.searchParams.order = newOrder;
				// 再次发送请求
				this.getSearchData();
			},
		},
	};
</script>