Vue.js之排序和添加购物车操作

项目之按销量价格排序操作

<el-tabs v-model="activeName" @tab-click="priceFun" >
    <el-tab-pane label="按销量排序" name="hot"></el-tab-pane>
    <el-tab-pane label="按价格由高到低" name="toLow"></el-tab-pane>
    <el-tab-pane label="按价格由低到高" name="toHigh"></el-tab-pane>
</el-tabs>


 methods:{
      priceFun:function(tab,event){
        if(tab.name=="toHigh"){
          console.log(tab.name);
          function compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                  console.log('价格由高到低');
                  return value1 - value2;//价由高到低
                }
            }
          return this.productList.sort(compare('price'));
        }
        else if(tab.name=="toLow"){
          function compare(property){
              return function(a,b){
                  var value1 = a[property];
                  var value2 = b[property];
                    console.log('价格由高到低');
                    return value2 - value1;//价由低到高
                  }
              }
          return this.productList.sort(compare('price'));
        }
        else if(tab.name=="hot"){
          function compare(property){
              return function(a,b){
                  var value1 = a[property];
                  var value2 = b[property];
                    console.log('价格由高到低');
                    return value1 - value2;//按销量
                  }
              }
              console.log("按销量");
          return this.productList.sort(compare('pid'));
        }
      },

添加购物车模块

<el-button :type="item.buttonType" class="toCart"
              @click="toCar(item)" :disabled="item.isDisabled">{{item.buttonText}}</el-button>


toCar(item){
        console.log("哈哈哈哈哈哈");
        var uname=document.cookie.split(";")[0].split("=")[1];
        if(uname=="undefined"||uname==undefined){
            this.$alert('你好!请登录', '加入购物车失败', {
              confirmButtonText: '去登录',
              callback: action => {
                window.location.href="http://localhost:8080/#/login";
                return ;
              }
            });
        }else{
          var params = new URLSearchParams()
          params.append('uname', uname);
          params.append('pid', item.pid);
          axios.post("http://localhost/to_cart.php",params)
          .then(res=>{
            console.log(res);
            if(res.data.result==true||res.data.result=="true"){
              const h = this.$createElement;
              this.$notify({
                 title: '提示',
                 message: h('i', { style: 'color: teal'}, '宝贝已加入购物车'),
                 duration:2000
              });
              item.buttonType="success";
              item.isDisabled=true;
              item.buttonText="已加入购物车";
            }else{
              alert("添加失败!");
            }
          })
        }
      }

猜你喜欢

转载自blog.csdn.net/a3060858469/article/details/80552346