<template>
<div>
<!-- 模态框开始 -->
<div class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show':mdShow}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="closeModal">Close</button>
</div>
<div class="md-content">
<div class="confirm-tips">
<slot name="message"></slot>
</div>
<div class="btn-wrap">
<slot name="btnGroup"></slot>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
<!-- 弹出层开始 -->
<div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
<!-- 弹出层结束 -->
</div>
</template>
<script>
export default {
props:['mdShow'],
data () {
return {
msg: 'hello tomorrow'
}
},
methods:{
closeModal () {
this.$emit('close');
}
}
}
</script>
<style>
</style>
-----------------------------------------------------------------------------------------------------------------------------------------------------------
<template>
<div>
<nav-header></nav-header>
<nav-bread>
<span>Goods</span>
</nav-bread>
<div class="accessory-result-page accessory-page">
<div class="container">
<div class="filter-nav">
<span class="sortby">Sort by:</span>
<a href="javascript:void(0)" class="default cur">Default</a>
<a href="javascript:void(0)" class="price" @click="sortGoods">Price
<svg class="icon-arrow-short" :class="{'sort-up':!sortFlag}">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-short"></use>
</svg>
</a>
<a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
</div>
<div class="accessory-result">
<!-- filter -->
<div class="filter stopPop" id="filter" :class="{'filter-show':filterBy}">
<dl class="filter-price">
<dt>Price:</dt>
<dd><a href="javascript:void(0)" :class="{'cur':priceChecked=='all'}" @click="priceChecked=='all'">All</a></dd>
<dd v-for="(price,index) in priceFilter" :key="price.priceId">
<a href="javascript:void(0)" @click="setPriceFilter(index)" :class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
</dd>
</dl>
</div>
<!-- search result accessories list -->
<div class="accessory-list-wrap">
<div class="accessory-list col-4">
<ul>
<li v-for="item of goodsList" :key="item.productId">
<div class="pic">
<a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
</div>
<div class="main">
<div class="name">{{item.productName}}</div>
<div class="price">{{item.salePrice}}</div>
<div class="btn-area">
<a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
</div>
</div>
</li>
</ul>
<div style="width:100px;line-height:100px;text-align:center;" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
<img src="./../assets/loading-spokes.svg" alt="" v-show="loading">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
<!-- <pre>{{goodsList}}</pre> -->
<modal :mdShow="mdShow" @close="closeModal">
<p slot="message">
请先登录，否则无法加入到购物车中！
</p>
<div slot="btnGroup">
<a href="javascript:;" class="btn btn--m" @click="mdShow = false;">关闭</a>
</div>
</modal>
<modal :mdShow="mdShowCart" @close="closeModal">
<p slot="message">
<svg class="icon-status-ok">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
</svg>
<span>加入购物车成功!</span>
</p>
<div slot="btnGroup">
<a href="javascript:;" class="btn btn--m" @click="mdShowCart = false;">继续购物</a>
<router-link href="javascript:;" class="btn btn--m" to="/cart">查看购物车</router-link>
</div>
</modal>
<nav-footer></nav-footer>
</div>
</template>
<script>
import NavHeader from "@/components/NavHeader";
import NavFooter from "@/components/NavFooter";
import NavBread from "@/components/NavBread";
import axios from "axios";
import Modal from "./../components/Modal.vue";
export default {
data() {
return {
goodsList: [],
priceFilter: [
{
priceId: "100",
startPrice: "0.00",
endPrice: "100.00"
},
{
priceId: "200",
startPrice: "100.00",
endPrice: "500.00"
},
{
priceId: "300",
startPrice: "500.00",
endPrice: "1000.00"
},
{
priceId: "400",
startPrice: "1000.00",
endPrice: "5000.00"
}
],
priceChecked: "all",
filterBy: false,
overLayFlag: false, // 遮罩
sortFlag: true, // 排序
page: 1,
pageSize: 8,
busy: true,
loading: false,
mdShow: false,
mdShowCart: false
};
},
components: {
NavHeader,
NavFooter,
NavBread,
Modal
},
methods: {
getGoodsList(flag) {
var param = {
page: this.page,
pageSize: this.pageSize,
sort: this.sortFlag ? 1 : -1,
priceLevel: this.priceChecked
};
this.loading = true;
axios
.get("/goods/list", {
params: param
})
.then(res => {
var res = res.data;
this.loading = false;
if (res.status == "0") {
if (flag) {
this.goodsList = this.goodsList.concat(res.result.list);
if (res.result.list == 0) {
this.busy = true; // 意思是把请求滚动禁用
} else {
this.busy = false;
}
} else {
this.goodsList = res.result.list;
this.busy = false;
}
} else {
this.goodsList = [];
}
});
},
sortGoods() {
this.sortFlag = !this.sortFlag;
this.page = 1;
this.getGoodsList();
},
setPriceFilter(index) {
this.priceChecked = index;
this.page = 1;
this.getGoodsList();
},
loadMore() {
this.busy = true;
setTimeout(() => {
this.page++;
this.getGoodsList(true);
}, 500);
},
addCart(productId) {
axios
.post("/goods/addCart", {
productId: productId
})
.then(response => {
var res = response.data;
if (res.status == 0) {
this.mdShowCart = true;
this.$store.commit("updateCartCount", 1);
} else {
this.mdShow = true;
}
});
},
closeModal() {
this.mdShow = false;
this.mdShowCart = false;
},
showFilterPop() {
(this.filterBy = true), (this.overLayFlag = true);
},
closePop() {
(this.filterBy = false), (this.overLayFlag = false);
}
// ,
// setPriceFilter(index) {
// this.priceChecked = index;
// this.closePop();
// }
},
mounted() {
this.$nextTick(function() {
this.getGoodsList();
});
}
};
</script>
<style>
.sort-up {
transform: rotate(180deg);
transition: all 0.3s ease-out;
}
.icon-arrow-short {
transition: all 0.3s ease-out;
}
</style>