<!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/head-link"></template>
    <link th:href="@{/css/supplier/list.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 供应商搜索列表 -->
<div id="supplierList">
    <!--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/common/empty.png">
        <div class="msg">
            <p>暂未找到你搜索的供应商，快去<a href="/supplier/list.html">供应商列表</a>看看吧~</p>
        </div>
    </div>
    <!--列表-->
    <ul v-else class="supplierList">
        <li class="supplierItem clear" v-for="shop in listData">
            <div class="left">
                <a :href="'/supplier/index.html?id='+shop.id" target="_blank" class="logo">
                    <img :src="shop.logo">
                </a>
                <h5><a :href="'/supplier/index.html?id='+shop.id" :title="shop.name" target="_blank">
                    <span v-html="shop.name"></span>
                </a>
                <a v-if="shop.license" :href="shop.license" target="_blank" class="icon mIcon shop"></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.productList && shop.productList.length>0">
                        <li v-for="product in shop.productList">
                            <a :href="'/product-'+product.id+'.html'" target="_blank">
                                <img :src="product.image">
                                <span v-html="product.name"></span>
                            </a>
                        </li>
                        <li v-if="shop.productList.length<3" v-for="i in (3-shop.productList.length)"></li>
                    </template>
                    <li v-else-if="isPC" v-for="i in 3"></li>
                </ul>
                <a v-if="isPC" :href="'/supplier/index.html?id='+shop.id" 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/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier/list.js(v=${version})}"></script>
</body>
</html>
