<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>
