供应商搜索列表

src/main/java/com/caimei/www/controller/ProductController.java

@@ -36,7 +36,7 @@ public class ProductController extends BaseController {
      * 商品分类列表页
      */
     @GetMapping("/product/list.html")
-    public String hello(final Model model) {
+    public String list(final Model model) {
         model.addAttribute("searchFlag", "0");
         return PRODUCT_LIST_PATH;
     }
@@ -45,7 +45,7 @@ public class ProductController extends BaseController {
      * 商品搜索结果页
      */
     @GetMapping("/product/search.html")
-    public String hello2(final Model model) {
+    public String search(final Model model) {
         model.addAttribute("searchFlag", "1");
         return PRODUCT_LIST_PATH;
     }
@@ -54,7 +54,7 @@ public class ProductController extends BaseController {
      * 商品详情页
      */
     @GetMapping("/product/detail.html")
-    public String listPage(final Model model, @RequestParam("pid") Integer productId) {
+    public String detail(final Model model, @RequestParam("pid") Integer productId) {
         ProductDetail detail = productService.getProductDetailById(productId);
         model.addAttribute("product", detail);
         return PRODUCT_DETAIL_PATH;

src/main/java/com/caimei/www/controller/SupplierController.java

@@ -0,0 +1,38 @@
+package com.caimei.www.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/15
+ */
+@Controller
+public class SupplierController extends BaseController {
+
+	private static final String SUPPLIER_SEARCH_PATH = "supplier/search";
+	private static final String SUPPLIER_HOME_PATH = "supplier/home";
+
+    /**
+     * 供应商搜索结果页
+     */
+    @GetMapping("/supplier/search.html")
+    public String search() {
+        return SUPPLIER_SEARCH_PATH;
+    }
+
+    /**
+     * 供应商详情页
+     */
+    @GetMapping("/supplier/home.html")
+    public String home(final Model model, @RequestParam("sid") Integer shopId) {
+        /*ProductDetail detail = productService.getProductDetailById(productId);
+        model.addAttribute("product", detail);*/
+        return SUPPLIER_HOME_PATH;
+    }
+
+}

src/main/resources/static/css/product/detail.pc.css

@@ -85,7 +85,7 @@ li{list-style:none;}
 .shopBox{margin-bottom:16px;background:#FFF}
 .shopBox .bd{padding:0 16px 16px}
 .shopBox .bd .name{height:40px;line-height:40px;font-weight:bold;color:#4A4F58;font-size:14px;border-bottom:1px solid #F7F7F7}
-.shopBox .shop,.shopBox .heart{vertical-align:text-top}
+.shopBox .shop,.shopBox .heart{vertical-align:middle;display:inline-block;width:25px;}
 .shopBox .shop:before{width:30px;height:25px;background-position:5px -297px}
 .shopBox .bd .heart:before{width:25px;height:25px;background-position:-35px -297px}
 .shopBox .bd .tit{line-height:30px;font-weight:bold;color:#4A4F58;font-size:14px}

src/main/resources/static/css/supplier/search.h5.css

@@ -0,0 +1,28 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+li{list-style:none}
+footer{display:none!important}
+.loading{box-sizing:border-box;padding:20vw 0;text-align:center}
+.empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
+.empty img{width:40vw;height:40vw}
+.empty a{color:#E15616}
+.noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
+.supplierItem{width:100vw;margin:2.8vw auto 0;box-sizing:border-box;padding:2.6vw 3.3vw;background:#FFF;overflow:hidden}
+.supplierItem .left{padding-left:13.6vw;position:relative}
+.supplierItem .left .logo{position:absolute;left:0;top:0;width:12.2vw;height:12.2vw}
+.supplierItem .left .logo img{width:100%;max-height:100%}
+.supplierItem .left h5{line-height:6vw;font-weight:bold;font-size:3.7vw;position:relative}
+.supplierItem .left h5 span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;max-width:84%}
+.supplierItem .left h5 a:after{content:'\276F';position:absolute;right:2vw;top:2vw;font-weight:normal}
+.supplierItem .left p{line-height:6vw;font-size:3.4vw;color:#93979F;white-space:nowrap}
+.supplierItem .left p>span{white-space:normal;height:auto;display:inline-block;vertical-align:top;max-width:82%}
+.supplierItem .left .tag{display:inline-block;height:4.4vw;line-height:4.4vw;font-size:2.6vw;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:2.2vw;padding:0 1vw}
+.supplierItem .left .shop,.supplierItem .left .heart{vertical-align:middle;display:inline-block;height:5.5vw}
+.supplierItem .left .shop:before{width:7.5vw;height:6vw;background-position:-1% 60%;margin-top:-1vw}
+.supplierItem .left .heart:before{width:5.5vw;height:5.5vw;background-position:0% 36.5%}
+.supplierItem .products{position:relative;margin-top:2.6vw}
+.supplierItem .products li{width:29.4vw;min-height:29.4vw;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;margin:0 1.3vw}
+.supplierItem .products li img{width:29.4vw;height:29.4vw}
+.supplierItem .products li span{display:block;line-height:4vw;padding-top:2.6vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:3vw;color:#93979F}

src/main/resources/static/css/supplier/search.pc.css

@@ -0,0 +1,30 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+li{list-style:none;}
+.loading{box-sizing:border-box;padding:200px 0;text-align:center;}
+.empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px;}
+.empty img{width:180px;height:180px;}
+.empty a{color:#E15616;}
+.supplierList{width:1184px;margin:16px auto;background:#FFF}
+.supplierItem{box-sizing:border-box;padding:16px;border-top:1px solid #F5F5F5}
+.supplierItem:first-child{border:none}
+.supplierItem .right{float:right;width:576px;position:relative}
+.supplierItem .left{float:left;width:560px;box-sizing:border-box;padding-left:152px;position:relative}
+.supplierItem .left .logo{position:absolute;left:0;top:0;width:136px;height:124px}
+.supplierItem .left .logo img{width:100%;max-height:100%}
+.supplierItem .left h5{line-height:32px;font-weight:bold;font-size:20px;}
+.supplierItem .left h5 span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align: middle;max-width:84%;}
+.supplierItem .left p{line-height:26px;font-size:14px;color:#93979F;white-space:nowrap}
+.supplierItem .left p>span{white-space:normal;height:auto;display:inline-block;vertical-align:top;max-width:82%}
+.supplierItem .left .shop,.supplierItem .left .heart{vertical-align:middle;display:inline-block;height:25px}
+.supplierItem .left .shop:before{width:30px;height:25px;background-position:5px -297px}
+.supplierItem .left .heart:before{width:25px;height:25px;background-position:-35px -297px}
+.supplierItem .left .tag{display:inline-block;height:20px;line-height:20px;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:10px;padding:0 5px}
+.supplierItem .products{position:relative;height:124px}
+.supplierItem .products li{float:left;width:100px;min-height:100px;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;margin-right:16px}
+.supplierItem .products li img{width:100px;height:100px}
+.supplierItem .products li span{display:block;padding-top:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#93979F}
+.supplierItem .right .four{position:absolute;right:0;top:38px;line-height:24px;font-size:16px;color:#E15616}
+.supplierItem .right .four:hover{border-bottom:1px solid #E15616}

src/main/resources/static/js/product/list.js

@@ -159,8 +159,13 @@ var productList = new Vue({
     },
     created: function () {
         this.searchFlag = $('#searchFlag').val() * 1 === 1;
-        this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
-        this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 10;
+            this.params.num = 1;
+        }
         this.params.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : "";
         this.params.sortField = getUrlParam("sortField") ? getUrlParam("sortField") : "";
         this.params.sortType = getUrlParam("sortType") ? getUrlParam("sortType") * 1 : 1;

src/main/resources/static/js/supplier/search.js

@@ -0,0 +1,114 @@
+var supplierList = new Vue({
+    el: "#container",
+    data: {
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 0,
+            num: 0,
+            keyword: ""
+        },
+        listData: [],
+        listRecord: 0,
+        pageInput: ''
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        getListByKeyword: function () {
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/shop", {
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    if(isPC){
+                        _self.listData = result.items;
+                    }else{
+                        _self.listData = _self.listData.concat(result.items);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        },
+
+    },
+    created: function () {
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 10;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 10;
+            this.params.num = 1;
+        }
+        this.params.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : "";
+        // 获取列表数据
+        this.getListByKeyword();
+    },
+    mounted: function () {
+        var searchTypeID = getUrlParam("searchTypeID");
+        var _self = this;
+        if(!isPC){
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        _self.params.num = next;
+                        if (_self.requestFlag){
+                            console.log(_self.params);
+                            // 获取列表数据
+                            _self.getListByKeyword();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                    }
+                }
+            });
+        }
+    }
+});

src/main/resources/templates/product/detail.html

@@ -118,7 +118,7 @@
     <div class="wrap clear">
         <div v-if="!isPC" class="mShopBox">
             <a th:href="@{'/shop/home.html?sid=' + ${product.shopId}}">
-                <span class="name"><em th:text="${product.shopTitle}"><i class="mIcon shop"></i></em><i class="mIcon shop"></i></span>
+                <span class="name"><em th:text="${product.shopTitle}"></em><i class="mIcon shop"></i></span>
                 <span>经营范围：<em th:text="${product.businessScope}"></em></span>
                 <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
                 <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>

src/main/resources/templates/supplier/search.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-供应商列表</title>
+    <template th:replace="components/headLink"></template>
+    <link th:href="@{/css/supplier/search.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier/search.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!--页面主体数据-->
+<div id="container">
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/base/empty.png">
+        <div class="msg">
+            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
+            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+        </div>
+    </div>
+    <!--列表-->
+    <ul v-else class="supplierList">
+        <li class="supplierItem clear" v-for="shop in listData">
+            <div class="left">
+                <a :href="'/supplier/prolist-'+shop.sid+'.html'" target="_blank" class="logo">
+                    <img :src="shop.shoplogo">
+                </a>
+                <h5><a :href="'/supplier/prolist-'+shop.sid+'.html'" :title="shop.shoptitle" target="_blank">
+                    <span v-html="shop.shoptitle"></span><i class="icon mIcon shop"></i>
+                </a>
+                </h5>
+                <p>满意度：<span><i v-for="i in 5" class="icon mIcon heart"></i></span></p>
+                <p>所在地区：<span v-text="shop.address"></span></p>
+                <p>经营范围：<span v-if="shop.businessscope"><em v-for="scop in shop.businessscope.split('/')" class="tag" v-text="scop"></em></span></p>
+            </div>
+            <div class="right">
+                <ul class="products clear mfc">
+                    <template v-if="shop.products && shop.products.length>0">
+                        <li v-for="product in shop.products">
+                            <a :href="'/product-'+product.pid+'.html'" target="_blank">
+                                <img :src="product.image">
+                                <span v-html="product.name"></span>
+                            </a>
+                        </li>
+                        <li v-if="shop.products.length<3" v-for="i in (3-shop.products.length)"></li>
+                    </template>
+                    <li v-else-if="isPC" v-for="i in 3"></li>
+                </ul>
+                <a v-if="isPC" :href="'/supplier/productlist-'+shop.sid+'.html'" target="_blank" class="four">进入本店铺>>></a>
+            </div>
+        </li>
+    </ul>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier/search.js(v=${version})}"></script>
+</body>
+</html>