master

分支 (1)

管理

管理

master

plx-data-analyze-web
/
goods-list.html

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="./static/css/goods-list.css">
    <link rel="stylesheet" href="./static/css/commonality.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <script src="./static/js/main.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js" charset="utf-8"></script>
    <title>平利县数据分析平台</title>
</head>

<body>
    <div class="home" id="app">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li class="selectBar">
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li>
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li>
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li>
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li>
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="slideshow">
            <div>
                平利县电商服务平台
            </div>
        </div>
        <div class="main">
            <div class="main-main">
                <div class="main-right">
                    <div class="main-right-title">
                        <div class="main-title-search">
                            <div>
                                <input type="text" v-model="goods.name" placeholder="请输入关键字">
                            </div>
                            <div @click="search()">
                                搜索
                            </div>
                        </div>
                    </div>
                    <div class="main-right-list">
                        <ul>
                            <li v-for="(item,index) in goodsList">
                                <a :href="item.detailUrl" target="_blank" style="color: #000;">
                                    <div class="list-top">
                                        {{item.name}}
                                    </div>
                                    <div class="list-bottom">
                                        <img v-bind:src="item.picUrl">
                                    </div>
                                </a>
                            </li>
                            <li class="main-right-more">
                                <div @click="moreClick">{{moreBtn}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            goodsList: [],
            pageIndex: 0,
            moreBtn: "查看更多",
            goods: {
                name: null
            }
        },
        methods: {
            moreClick: function () {
                this.$http.get(getHttpServer() + "/api/web/goods", {
                    params: {
                        page: this.pageIndex,
                        size: 10,
                        name: this.goods.name
                    }
                }).then(function (response) {
                    var goods = response.data.data.content;
                    if (goods && goods.length > 0) {
                        this.pageIndex = this.pageIndex + 1;
                        for (var v in goods) {
                            this.goodsList.push(goods[v]);
                        }

                    } else {
                        this.moreBtn = "没有更多了"
                    }

                }).catch(function (response) {
                });
            },
            search: function () {
                this.goodsList = [];
                this.moreBtn = "加载更多";
                this.pageIndex = 0;
                this.$http.get(getHttpServer() + "/api/web/goods", {
                    params: {
                        page: this.pageIndex,
                        size: 10,
                        name: this.goods.name
                    }
                }).then(function (response) {
                    var goods = response.data.data.content;
                    if (goods && goods.length > 0) {
                        this.pageIndex = this.pageIndex + 1;
                        for (var v in goods) {
                            this.goodsList.push(goods[v]);
                        }

                    } else {
                        this.moreBtn = "没有更多了"
                    }

                }).catch(function (response) {
                });
            }
        }

    });

    app.moreClick();
</script>

</html>