116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<template>
|
|
<div class="page-goods-list">
|
|
<van-nav-bar
|
|
:title="category"
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
left-text="返回"
|
|
left-arrow
|
|
@click-left="$router.back()"
|
|
/>
|
|
<div class="goods-list-wrapper">
|
|
<div
|
|
v-for="g in dataList"
|
|
:key="g.id"
|
|
>
|
|
<van-card
|
|
class="goods-item"
|
|
:desc="g.desc"
|
|
:thumb="g.picture"
|
|
@click="showDetail(g)"
|
|
>
|
|
<template #title>
|
|
<div class="g-title">{{g.title}}</div>
|
|
</template>
|
|
<template #price>
|
|
<div class="g-info">
|
|
<div class="price">￥<span>{{g.sell_price}}</span></div>
|
|
<div class="sell-info"><span>{{g.sell_count}}</span>人已经付款购买</div>
|
|
</div>
|
|
</template>
|
|
</van-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import http from "../components/http";
|
|
export default {
|
|
name: "GoodsList",
|
|
data() {
|
|
return {
|
|
category: "",
|
|
loading: false,
|
|
dataList: [],
|
|
total: 0,
|
|
pageSize: 15
|
|
};
|
|
},
|
|
mounted() {
|
|
this.category = this.$route.query.cate;
|
|
document.title = this.category;
|
|
this.loadData(1);
|
|
},
|
|
methods: {
|
|
onPageChange(page) {
|
|
this.loadData(page);
|
|
},
|
|
showDetail(g) {
|
|
this.$router.push("/goods-detail?id=" + g.id);
|
|
},
|
|
loadData(page) {
|
|
this.loading = true;
|
|
http.shop
|
|
.get(
|
|
"/goods?list=y&page=" + page + "&category=" + this.category
|
|
)
|
|
.then(data => {
|
|
this.loading = false;
|
|
this.dataList = data.list;
|
|
this.total = data.total;
|
|
this.pageSize = data.size;
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.goods-list-wrapper {
|
|
padding: 15px 10px;
|
|
}
|
|
.goods-item {
|
|
text-align: left;
|
|
padding: 0px;
|
|
padding-bottom: 10px;
|
|
border-bottom: dashed 1px #eee;
|
|
.g-title {
|
|
word-break: break-all;
|
|
margin-top: 8px;
|
|
color: #333;
|
|
line-height: 1.36;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
font-size: 14px;
|
|
-webkit-box-orient: vertical;
|
|
height: 38px;
|
|
}
|
|
.price {
|
|
color: #e4393c;
|
|
span {
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.sell-info {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|