Vue实现商品价格筛选

系统管理员 2021-07-24 20:49 700阅读 0赞

**当我们遇到电商项目的时候面对不同价格的时候  
就需要我把 10 块到20块的商品给单独的筛选出来**  
**页面展示的不同的价格间的商品**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]

**Json数据格式**

{ 
        "status": "0",
        "msg": "",
        "result": { 
            "count": 8,
            "slider":[
                { 
                    "title":"All",
                    "low":-1,
                    "hight":999999
                },
                { 
                    "title":"0.00-100.00",
                    "low":0,
                    "hight":100
                },
                { 
                    "title":"100.00-500.00",
                    "low":100,
                    "hight":500
                },
                { 
                    "title":"500.00-1000.00",
                    "low":500,
                    "hight":1000
                },
                { 
                    "title":"1000.00-2000.00",
                    "low":1000,
                    "hight":2000
                }
            ],
            "list": [
                { 
                    "_id": "58e7050398dab115d336b3f2",
                    "productId": "201710007",
                    "productName": "自拍杆",
                    "salePrice": 39,
                    "productImage": "/img/zipai.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e704ef98dab115d336b3f1",
                    "productId": "201710002",
                    "productName": "智能插线板",
                    "salePrice": 59,
                    "productImage": "/img/6.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58c284d7117a2e6599abef5e",
                    "productId": "201710004",
                    "productName": "头戴式耳机-3",
                    "salePrice": 80,
                    "productImage": "/img/2.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e7058498dab115d336b3fc",
                    "productId": "201710017",
                    "productName": "小钢炮蓝牙音箱",
                    "salePrice": 129,
                    "productImage": "/img/1.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e7058d98dab115d336b3fd",
                    "productId": "201710018",
                    "productName": "智能摄像机",
                    "salePrice": 389,
                    "productImage": "/img/photo.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e7057798dab115d336b3fb",
                    "productId": "201710016",
                    "productName": "Ear700",
                    "salePrice": 700,
                    "productImage": "/img/16.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e7051698dab115d336b3f4",
                    "productId": "201710009",
                    "productName": "IH 电饭煲",
                    "salePrice": 999,
                    "productImage": "/img/9.jpg",
                    "productUrl": ""
                },
                { 
                    "_id": "58e7052a98dab115d336b3f6",
                    "productId": "201710011",
                    "productName": "Ear1000",
                    "salePrice": 1000,
                    "productImage": "/img/11.jpg",
                    "productUrl": ""
                }
            ]
        }
    }

**Home页面**

<template> <div class="tt"> <div class="box"> <i class="el-icon-shopping-cart-2" @click="Get"> <span>{ { Cartlist.length}}</span> </i> </div> <div class="box_top">  <i class="el-icon-top" @click="index">sort</i> <i class="el-icon-bottom" @click="index1">sort</i> </div> <div class="box_centre">  <div class="box_centre_left"> <ul class="box_centre_left_ul"> <li class="li" v-for="(item,index) in price" :key="index" @click="Onclick(item,index)" :class="{ 'box_centre_left_li':left==index}" >{ { item.title}}</li> </ul> </div>  <div class="box_centre_right" ref="box_height"> <el-row> <el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in list " :key="index"> <div class="box_centre_right_bos"> <img :src="item.productImage" alt /> <p>{ { item.productName}}</p> <p>￥{ { item.salePrice}}</p> <el-row> <el-button type="success" @click="click(item)">加入购物车</el-button> </el-row> </div> </el-col> </el-row> </div> </div>  <div class="box_footer_loadging" v-show="isShow"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3681478079,2138136230&fm=26&gp=0.jpg" alt /> </div> </div> </template> <script> import {  Dialog } from "vant"; export default { 
      data() { 
        return { 
          isShow: false, //加载图
          list: [],
          price: [],
          list1: [],
          left: -1, //筛选样式
          sort: true, //排序
          Cartlist: [],
        };
      }, mounted() { 
        this.$axios.get("http://localhost:8080/data.json").then((res) => { 
          this.list = res.data.result.list;
          this.list1 = res.data.result.list;
          this.price = res.data.result.slider;
        });
        //
        this.Cartlist = this.$store.state.CartList;
        console.log(this.Cartlist); //下拉加载 this.$refs.box_height.addEventListener("scroll", () => { 
          var clientHeight = document.documentElement.clientHeight;
          var scrollTop = document.documentElement.scrollTop;
          var scrollHeight = document.documentElement.scrollHeight; if (scrollHeight - scrollTop - clientHeight < 1) { 
            this.isShow = true; window.setTimeout(() => { 
              this.$axios.get("http://localhost:8080/data2.json").then((res) => { 
                this.list = [...this.list, ...res.data.result.list];
              });
              this.isShow = false;
            }, 3000);
          }
        });
      }, methods: { 
        //筛选 Onclick(item, index) { 
          this.list = [];
          this.left = index; this.list1.forEach((ele) => { 
            if (item.low <= ele.salePrice && ele.salePrice <= item.hight) { 
              this.list.push(ele);
            }
          });
        }, index() { 
          //排序
          this.sort = !this.sort; if (this.sort) { 
            this.list.sort((a, b) => { 
              return a.salePrice - b.salePrice;
            });
          } else { 
            this.list.sort((a, b) => { 
              return b.salePrice - a.salePrice;
            });
          }
        }, index1() { 
          this.sort = !this.sort; if (this.sort) { 
            this.list.sort((a, b) => { 
              return b.salePrice - a.salePrice;
            });
          } else { 
            this.list.sort((a, b) => { 
              return a.salePrice - b.salePrice;
            });
          }
        }, //点击添加购物车 click(item) { 
          Dialog.confirm({ 
            message: "是否加入购物车",
          }) .then(() => { 
              this.$store.dispatch("onclick", item);
            }) .catch(() => { 
              // on cancel
            });
        }, //跳转购物车 Get(){ 
          this.$router.push({ 
            path:"/About"
          })
        }
      },
    }; </script> <style scoped> * { 
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .tt { 
      width: 98%;
      background: rgb(247, 248, 250);
    }
    .box { 
      width: 100%;
      height: 9vh;
      text-align: right;
      line-height: 9vh;
    }
    .box_top { 
      width: 100%;
      height: 5vh;
      line-height: 5vh;
      text-align: right;
    }
    .box_centre { 
      width: 100%;
      height: 80vh;
      display: flex;
    }
    .box_centre_left { 
      width: 20%;
      height: 80vh;
      background: rgb(247, 248, 250);
    }
    .box_centre_right { 
      width: 79%;
      height: 80vh;
      overflow: scroll;
    }
    .box_centre_right::-webkit-scrollbar { 
      display: none;
    }
    .box_centre_right_bos { 
      height: 50vh;
      text-align: center;
      border: 1px solid gainsboro;
    }
    .box_centre_right_bos img { 
      width: 100%;
      height: 50%;
    }
    .box_footer_loadging { 
      width: 100%;
      height: 100px;
    }
    .box_footer_loadging img { 
      width: 100px;
      height: 100px;
      margin-left: 45%;
    }
    .box_centre_left_ul li { 
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
    }
    .box_centre_left_li { 
      border-left: 3px solid red;
      font-size: 15px;
      text-align: left 10px;
    }
    .li { 
      font-size: 15px;
      color: rgb(161, 159, 159);
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/84ecdbd8bd434a8289b178dfa6131e90.png