博客

Search.vue

• 
  页面模板
  

<template>
......
<!-- 排序 -->
<ul class="sui-nav">
	<li :class="{active : isOne}"  	//点击谁，谁高亮
		@click="changeOreder(1)">	//点击调用 排序规则的转换 方法
		//高亮状态时，按照 searchParams 参数的排序规则显示箭头的升降
		<a> 综合 <span v-show ="isOne && !isDown">⬆</span>		
				<span v-show="isOne && isDown">⬇</span>
		</a>
	</li>
	<li :class="{active : !isOne}" @click="changeOreder(2)">
		<a> 价格 <span v-show ="!isOne && !isDown">⬆</span>
				<span v-show="!isOne && isDown">⬇</span>
		</a>
	</li>
	......
</ul>

......
</template>

• 
  计算属性
  

<script>
......
  computed: {
	......
    //排序效果标识
    isOne() {
      return this.searchParams.order.indexOf("1") != -1
    },
    //排序箭头
    isDown() {
      return this.searchParams.order.indexOf("desc") != -1 
    }
  },

• 
  排序规则的转换方法
  

  methods: {
    //由于搜索功能，向服务器发请求获取search模块数据，会根据每次传递的参数获取不同的数据进行展示，所以dispatch不能放 mounted 里面
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
    //=== 排序 的转换 ===
    changeOreder(flag){
      // flag 代表用户点击的是 综合(1) 还是 价格(2)
      
      //原始排序规则
      let originOrder = this.searchParams.order;
      let originFlag = this.searchParams.order.split(":")[0];
      let originSort = this.searchParams.order.split(":")[1];

      //准备一个新的排序规则
      let newOrder = "";

      //开始判断
      //如果重复点击，转换排序规则
      if( flag == originFlag){
        newOrder = `${originFlag}:${ originSort=="desc"?"asc":"desc"}`;
      }else {
        //不是重复点击，修改为点击该排序的默认
        newOrder = `${flag}:${"desc"}`
      }

      //重新整理参数
      this.searchParams.order = newOrder;

      //发请求
      this.getData()
    },
  },

};
</script>