综合、销量、价格对商品进行排序

1、orderField,order为传给后台的参数2个参数进行综合、销量、价格对商品进行排序在这里插入图片描述
2、2.1:html

<!--筛选分类-->
    <div class="screen_list">
      <div :class="selectIndex == 0 ?'synth':''" @click="selectedFn($event)" data-index="0">综合
        <img :src='selectIndex == 0 ?"/static/images/single_triangle_red.png":"/static/images/single_triangle_gray.png"'
             class='double_triangle'/>
      </div>
      <div class="clickSales" :class="selectIndex == 1 ?'synth':''" @click='selectedFn($event)' data-index="1">销量
        <img v-if='sort =="top" && selectIndex == 1' src='/static/images/triangle_top.png' class='double_triangle'/>
        <img v-else-if='sort =="bottom" && selectIndex == 1' src='/static/images/triangle_bottom.png'
             class='double_triangle'/>
        <img v-else src='/static/images/triangle_default.png' class='double_triangle'/>
      </div>
      <div class="clickPriceing" :class="selectIndex == 2 ?'synth':''" @click='selectedFn($event)' data-index="2">价格
        <img v-if='sort =="top2" && selectIndex == 2' src='/static/images/triangle_top.png' class='double_triangle'/>
        <img v-else-if='sort =="bottom2" && selectIndex == 2' src='/static/images/triangle_bottom.png'
             class='double_triangle'/>
        <img v-else src='/static/images/triangle_default.png' class='double_triangle'/>
      </div>
    </div>

2.2定义变量

 sort: '',
        synthesize: '', // 综合
        sales: '',    // 销量
        priceing: '',   // 价钱
        selectIndex: 0,
        orderField: '', // 销售、价格排序
        order: '', // 升序降序

2.3js

selectedFn(e) {
        let target = e.target
        this.selectIndex = target.getAttribute('data-index')
        if (this.selectIndex === '1' && this.sort !== 'top') {
          this.orderField = 'salesVolume_i'
          this.order = 'asc'
          this.sort = 'top'
        } else if (this.selectIndex === '1' && this.sort !== 'bottom') {
          this.orderField = 'salesVolume_i'
          this.order = 'desc'
          this.sort = 'bottom'
        } else if (this.selectIndex === '2' && this.sort !== 'top2') {
          this.orderField = 'price'
          this.order = 'asc'
          this.sort = 'top2'
        } else if (this.selectIndex === '2' && this.sort !== 'bottom2') {
          this.orderField = 'price'
          this.order = 'desc'
          this.sort = 'bottom2'
        } else if (this.selectIndex === '0') {
          this.orderField = ''
          this.order = ''
          this.sort = ''
        }
        this.getList()
      }

猜你喜欢

转载自blog.csdn.net/xuqingbaobao/article/details/84306601