平台售卖属性的操作
就是点击平台的售卖属性，下面显示对应的内容
这里我们要借助这个props属性
这里块是平台的售卖属性，我们在这里绑定回调，一点击就把id传给父组件
我们需要把这俩个参数传进入
| 商品属性的数组: ["属性ID:属性值:属性名"] 示例: ["2:6.0～6.24英寸:屏幕尺寸"] |
然后回到父组件，还需要给他绑定事件
这样页面就展示了相对应的数据了
平台的售卖属性的面包屑展示，但是这么写会有个bug
没有考虑到数组去重
这样就能实现数据去重的功能开发了
删除数组的办法需要给数组传一个参数，例如4g告诉删除的就是这个4g的索引值
// 收集平台的信息attrInfo(attr,attrValue){let props=`${attr.attrId}:${attrValue}:${attr.attrName}`// 数组去重if(this.searchParams.props.indexOf(props)==-1) this.searchParams.props.push(props)this.getData()},removeAttr(index){this.searchParams.props.splice(index,1)this.getData()},排序操作上
大概的效果就是点击价格，可以按照价格升序或者降序。
这些价格不需要，我们来计算，只需要把参数传给后端服务器，让它帮我们搞
排序方式
1: 综合,2: 价格 asc: 升序,desc: 降序
示例: "1:desc"
问题：order属性的属性值最多有多少中写法？
1:asc
1:desc
2:asc
2:desc
首先我们要有一个起始值，并且这个初始值应该是综合|降序
修改结构成这样。这个有active类名就是有背景色
考虑的问题
谁应该有类名：通过order属性当中包含1（综合）| 2(价格)
为了避免冗余，我们直接在计算属性中封装这俩个办法
我们现要考虑箭头
谁有类名，谁就有箭头
箭头用什么制作？
直接去阿里找，然后复制它的url，当然如果我们要在页面中去引用它，需要加https
https://at.alicdn.com/t/c/font_4078647_4sihq5jwkj.css
然后引用它，就有箭头了
那这个箭头是上还是下，这个取决于这个desc这个属性
<ul class="sui-nav"><li :class="{ active : isOne}"><a href="#">综合<span v-show="isOne" class="iconfont" :class="{'icon-up':isAcs,'icon-down':isDesc}"></span></a></li><li :class="{ active : isTwo}"><a href="#">价格<span v-show="isTwo" class="iconfont" :class="{'icon-up':isAcs,'icon-down':isDesc}"></span></a></li></ul>isOne(){return this.searchParams.order.indexOf('1')!=-1},isTwo(){return this.searchParams.order.indexOf('2')!=-1},isAcs(){return this.searchParams.order.indexOf('asc')!=-1},isDesc(){return this.searchParams.order.indexOf('desc')!=-1}排序操作下
完成了上部分的逻辑，现在实现点击实现排序操作的功能
因为，我们要判断到底是综合还是价格，因此我们需要传参
这个形参相到与是一个标记，代表用户点击的是综合（1）价格（2）
将这个1:desc进行分割。这样好进行取反操作
做if()语句能确定点击的一定是综合或价格
changeOrder(flag){let originOrder=this.searchParams.order;let originFlag=this.searchParams.order.split(":")[0]let originSort=this.searchParams.order.split(":")[1]// 准备一个新的order属性值let newOrder=''// 点击的是综合if(flag==originFlag){newOrder=`${originFlag}:${originSort=='desc'?"asc":"desc"}`}else{// 点击的是价格newOrder=`${flag}:${'desc'}`}console.log(newOrder);// 将新的order赋予searchParamsthis.searchParams.order=newOrderthis.getData()}效果实现
