vue尚品汇商城项目-day04【26.排序操作（难点）】

26.排序操作（难点）

26.1使用阿里的iconfont

1. 在线地址: https://www.iconfont.cn/
2. 注册并登陆
3. 创建一个可以包含需要的所有图标的项目
4. 搜索图标并添加到购物车
5. 将购物车中的图标添加到指定项目
6. 修改图标的名称
7. 选择Font class的使用方式, 并点击生成在线样式url
8. 在index页面中引入此图标的在线样式链接: <link rel=“stylesheet” href=“http://at.alicdn.com/t/font_1766283_dobjk7xxze7.css”>
9. 在组件中使用
   <i class=”iconfont icondown”>可以通过color改变颜色, 通过font-size改变大小

26.2排序操作

排序操作难点：

• 考虑点1：谁应该有类名class=“active”？

  答案：order为1，综合加类名，order为2，价格加类名。

• 考虑点2：谁应该有箭头？

​ 答案：谁有类名，谁就有箭头

• 考虑点3：如何区分是向上↑还是向下↓？

​ 答案：取决于order中是asc还是desc

• 考虑点4：如何区分当前点击是点的综合还是价格，需要向上向下动态展示？

  答案：添加点击事件，去动态判断设置1、2、asc、desc，并拼接order属性值

代码修改：

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;
      },
    }

注意点1：li标签谁有class="active"谁就会有颜色。

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

注意点2：

排序方式 1: 综合、2: 价格、asc: 升序、desc: 降序

示例: “1:desc”

排序目前假设只有【综合、价格】，分asc升序、desc降序，那么总共结果会有4种【1:asc 、1:dexc、2:asc、2:desc】

注意点3：

问题：如何区分用户点击的是“综合”排序还是“价格”排序？

答案：根据order参数中的数字是1（综合）还是2（价格）进行区分。

注意点4：

问题：如何添加类名？

答案：有2种方式，方式1采用标签上直接加判断，方式2采用计算属性返回

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

注意点5：箭头采用第三方组件（阿里图标库），练习使用

• 第一步：百度搜索“阿里图标库”，把搜索想要的图标添加到自己项目中
• 第二步：点击“在线生成链接”，把url在public/index.html中引入样式
• 第三步：使用样式，格式为class=“iconfont icon-icon-arrow-top4”，切记前缀一定要写iconfont 才能生效

注意点6：

问题：如何区分是向上↑还是向下↓？

答案：取决于order中是asc还是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;
      },
}

注意点7：

问题：如何区分当前点击是点的综合还是价格，需要向上向下动态展示？

答案：定义点击事件

<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()
      }

本人其他相关文章链接

1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
2.vue尚品汇商城项目-day04【25.面包屑处理关键字】
3.vue尚品汇商城项目-day04【26.排序操作（难点）】
4.vue尚品汇商城项目-day04【27.分页器静态组件（难点）】
5.vue尚品汇商城项目-day04【28.详情页面Detail】
6.vue尚品汇商城项目-day04【29.加入购物车操作（难点）】