【Vue项目】实现商品的升降序

需求

【综合】初始值降序↓，【价格】初始值降序↓

点击【综合】/【价格】页签，每点击一次，顺序由↓变为↑

思路

1. 给li绑定一个动态的类active，判断何时加上去类。为什么要加这个active，一个是可以改变背景颜色，另一个是为了确定，我们正在点击哪一个页签。

接口文档定义了数据searchParams里的order：【1:综合；2：价格；asc:升序；desc:降序】

那么一共有四种排列方式 1:asc；1:desc；2:asc；2:desc

利用这个order属性，来判断我们正在点击哪一个页签。

this.searchParams.order.indexOf('1') != -1

//代表了我们正在点击序号1，也就是【综合】这个页签

包装成一个计算属性，方便我们使用

computed: {
    isOne(){
      return this.searchParams.order.indexOf('1') != -1
    },
    isTwo(){
      return this.searchParams.order.indexOf('2') != -1
    },
  },

 

2.接下来我们要给页签旁边加一个箭头。这里采用了阿里的图标库： https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2758111

在静态文件夹public中的index.html引入

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2758111_9hehey1sgko.css">

以便可以使用在线icon素材

3.但是箭头不是随时都要出现的，而是随着我们点击哪一个页签，箭头就跟着显示出来。

可以使用v-show，控制的条件为isOne/isTwo

4.判断箭头是朝上还是朝下，业务逻辑为升降序。

思考怎么判断呢？asc和desc来作区分，那我们要拿到数据里面的order，来看下order里面有没有asc、desc，也是利用计算属性来包装成isAsc/isDesc

    isAsc(){
      return this.searchParams.order.indexOf('asc') != -1
    },
    isDesc(){
      return this.searchParams.order.indexOf('desc') != -1
    }

5.最后一个要思考:点击出效果。

给li绑定一个点击事件， 因为要区分点击的是哪一个页签，所以对于这个点击事件，要传参进去。

 @click="changeOrder('1')"

changeOrder(flag){
      //flag形参:它是一个标记，代表用户点击的是综合（1）价格（2) [用户点击的时候传递进来的]
      if (flag) {
        let orginOrder = this.searchParams.order;
        // 这里获取到的是最开始的状态
        let orginFlag = this.searchParams.order.split(':')[0];
        let orginSort = this.searchParams.order.split(':')[1];
        // 准备一个新的属性值
        let newOrder = "";
        if (flag == orginFlag) {
          // 说明这里点的是综合
          newOrder = `${orginFlag}:${orginSort == 'desc' ? 'asc':'desc'}`;
        }else{
          // 说明这里点的是价格
          newOrder = `${flag}:${'desc'}`;
        }
        // 将newOrder赋予searchParams
        this.searchParams.order = newOrder;
        // 再次发送请求
        this.getData();
      }
  },

现在我们可以拿到当前被点击页签的序号和升降序了，采用split(":")来分割他们。

先判断此时的页面，再在if语句中各自判断是升还是降序，借助三元表达式来判断，最后赋给一个临时的属性值newOrder。

 此时的newOrder里面就包含了{序号：升降序}，我们只要赋值给数据SearchParams的order，再发送请求即可。