26. Sorting operation (difficulty)

26.1 Use Ali's iconfont

Online address: https://www.iconfont.cn/
register and log in
Create a project that can contain all the icons you need
Search icon and add to cart
Add the icon in the shopping cart to the specified item
Change the name of the icon
Choose how to use the Font class, and click Generate Online Style URL
Introduce the online style link of this icon in the index page: <link rel="stylesheet" href="http://at.alicdn.com/t/font_1766283_dobjk7xxze7.css">
Use <i class="iconfont icondown"> in the component to change the color by color and change the size by font-size

26.2 Sorting operations

Difficulties in sorting operations:

Consider point 1: Who should have the class name class="active"?

Answer: The order is 1, the category name is added comprehensively, the order is 2, and the price is added to the category name.
Consider point 2: Who should have the arrow?

Answer: whoever has the class name, whoever has the arrow

Consider point 3: How to distinguish whether it is up ↑ or down ↓?

Answer: depends on whether the order is asc or desc

Consider point 4: How to distinguish whether the current click is a combination of points or a price, which needs to be displayed dynamically up and down?

Answer: Add a click event to dynamically judge and set 1, 2, asc, desc, and splice the order attribute value

Code modification:

public/index.html

<!-- 引入阿里图标库向上向下箭头的样式 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3963551_nocag8pfqor.css">

src/pages/Search/index.vue

<ul class="sui-nav">
      <li :class="{active: isOne}" @click="changeOrder('1')">
                  <a>综合<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></a>
                </li>
      <li :class="{active: isTwo}" @click="changeOrder('2')">
                  <a>价格<span v-show="isTwo" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></a>
                </li>
</ul>

methods: {
	//排序的操作
      changeOrder(flag) {
        //flag:用户每一次点击li标签的时候，用于区分是综合（1）还是价格（2）
        //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
        let originOrder = this.searchParams.order;
        let oiriginFlag = originOrder.split(":")[0];
        let oiriginSort = originOrder.split(":")[1];
        //新的排序方式
        let newOrder = '';
        //判断的是多次点击的是不是同一个按钮
        if (flag == oiriginFlag) {
          newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
        } else {
          //点击不是同一个按钮
          newOrder = `${flag}:${oiriginSort}`
        }
        //需要给order重新赋值
        this.searchParams.order = newOrder;
        //再次发请求
        this.getData()
      }
}

computed:{
      //判断order属性中是否包含1
      isOne() {
        return this.searchParams.order.indexOf("1") != -1;
      },
      //判断order属性中是否包含2
      isTwo() {
        return this.searchParams.order.indexOf("2") != -1;
      },
      //判断order属性中是否包含asc
      isAsc() {
        return this.searchParams.order.indexOf("asc") != -1;
      },
      //判断order属性中是否包含desc
      isDesc() {
        return this.searchParams.order.indexOf("desc") != -1;
      },
    }

Pay attention to point 1: Whoever has class="active" in the li tag will have the color.

insert image description here

<li :class="{active: isOne}">

Note 2:

Sorting method 1: general, 2: price, asc: ascending, desc: descending

Example: "1:desc"

Currently, it is assumed that there are only [comprehensive, price] for sorting, divided into asc ascending order and desc descending order, then there will be a total of 4 results [1:asc, 1:dexc, 2:asc, 2:desc]

Note 3:

Question: How to distinguish whether the user clicked on the "comprehensive" sorting or the "price" sorting?

Answer: Distinguish according to whether the number in the order parameter is 1 (comprehensive) or 2 (price).

Note 4:

Question: How to add class name?

Answer: There are 2 ways, the first way is to directly add judgment on the label, and the second way is to use the calculated attribute to return

方式1采用标签上直接加判断：
<li :class="{active: searchParams.order.indexOf("1") != -1}">
------------------------------------------------------------------------------
方式2采用计算属性返回：
computed:{
      //判断order属性中是否包含1
      isOne() {
        return this.searchParams.order.indexOf("1") != -1;
      }
}

Note 5: The arrow uses a third-party component (Alibaba icon library), practice use

Step 1: Baidu search for "Ali Icon Library", and add the desired icon to your project
Step 2: Click "Generate Link Online" and import the url into the style in public/index.html
Step 3: Use the style, the format is class="iconfont icon-icon-arrow-top4", remember that the prefix must be written iconfont to take effect

Note 6:

Question: How to distinguish whether it is up ↑ or down ↓?

Answer: depends on whether the order is asc or desc

<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span>

computed:{
      //判断order属性中是否包含asc
      isAsc() {
        return this.searchParams.order.indexOf("asc") != -1;
      },
      //判断order属性中是否包含desc
      isDesc() {
        return this.searchParams.order.indexOf("desc") != -1;
      },
}

Note 7:

Question: How to distinguish whether the current click is a combination of points or a price, which needs to be displayed dynamically up and down?

Answer: Define the click event

<li :class="{active: isOne}" @click="changeOrder('1')">
<li :class="{active: isTwo}" @click="changeOrder('2')">

//排序的操作
changeOrder(flag) {
        //flag:用户每一次点击li标签的时候，用于区分是综合（1）还是价格（2）
        //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
        let originOrder = this.searchParams.order;
        let oiriginFlag = originOrder.split(":")[0];
        let oiriginSort = originOrder.split(":")[1];
        //新的排序方式
        let newOrder = '';
        //判断的是多次点击的是不是同一个按钮
        if (flag == oiriginFlag) {
          newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
        } else {
          //点击不是同一个按钮
          newOrder = `${flag}:${oiriginSort}`
        }
        //需要给order重新赋值
        this.searchParams.order = newOrder;
        //再次发请求
        this.getData()
      }

Links to my other related articles

1. Vue Shangpinhui Mall Project-day04 [24. Click the search button to jump to the page product list, platform sales attribute dynamic display (develop Search component)]
2. Vue Shangpinhui Mall Project-day04 [25. Breadcrumbs Processing keywords]
3. Vue Shangpinhui Mall project-day04【26. Sorting operation (difficulty)】
4. Vue Shangpinhui Mall project-day04【27. Pager static components (difficulty)】
5. Vue Shangpinhui Mall project-day04【28. Details page Detail】
6. Vue Shangpinhui Mall project-day04【29. Add to shopping cart operation (difficult point)】

Vue Shangpinhui Mall Project-day04 [26. Sorting operation (difficult point)]

Article directory

26. Sorting operation (difficulty)

26.1 Use Ali's iconfont

26.2 Sorting operations

Links to my other related articles

Guess you like