当我们遇到电商项目的时候面对不同价格的时候
就需要我把 10 块到20块的商品给单独的筛选出来
页面展示的不同的价格间的商品
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>
<!-- 底部loadging加载 -->
<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>