增加空状态

components/supplier/banner.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+  export default {
+    name: 'BannerView'
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+.banner{
+  height:470px;
+  background: url(/images/supplier/bgImg.jpg)no-repeat center center
+}
+</style>

components/supplier/details.vue

@@ -40,10 +40,18 @@
         </div>
       </div>
       <div class="info">
-        <ul class="list-unstyled">
-          <li><p>产品参数<span>（仅供参考，以实际产品为准）</span></p></li>
-          <li v-if="!detail.cmpUuId" class="empty">暂无相关信息！</li>
-          <li v-if="detail.cmpUuId" v-for="item in cmpInfo.properties"><span v-text="item.property.labelCn"></span><span v-text="item.value"></span></li>
+        <div class="info_title">
+          <p>产品参数<span>（仅供参考，以实际产品为准）</span></p> <a @click="hasDown = !hasDown">更多 <i class="el-icon-arrow-down" v-if="hasDown"></i> <i v-if="!hasDown" class="el-icon-arrow-up"></i></a>
+        </div>
+        <div class="empty" v-if="!detail.cmpUuId || cmpInfo.properties.length === 0">
+          <img src="/images/supplier/icon/empty.png">
+          <div class="info">
+            <p>暂无供应商信息</p>
+            <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+          </div>
+        </div>
+        <ul class="list-unstyled" :style="hasDown ? height300 : heightAuto">
+          <li v-if="detail.cmpUuId" v-for="item in cmpInfo.properties"><span v-text="item.property.labelCn"></span><span v-text="item.value ? item.value : '-'"></span></li>
         </ul>
       </div>
     </div>
@@ -116,6 +124,13 @@
     name: 'DetailsView',
     data () {
       return {
+        hasDown: true,
+        height300: {
+          height: '300px'
+        },
+        heightAuto: {
+          height: 'auto'
+        },
         applyObj: {
           unitPrice: '',
           currency: 'RMB',
@@ -145,7 +160,6 @@
         return this.$store.state.supplier.detail.detail.data
       },
       cmpInfo () {
-        console.log(this.$store.state.supplier.detail.cmpInfo.data)
         return this.$store.state.supplier.detail.cmpInfo.data
       },
       user () {
@@ -461,8 +475,43 @@
   }
   .info{
     padding-bottom:90px;
+    .empty {
+      padding-top: 25px;
+      text-align: center;
+      img {
+        vertical-align: top;
+        margin-right: 15px;
+      }
+      .info {
+        display: inline-block;
+        padding-top: 10px;
+      }
+    }
+    .info_title{
+      position:relative;
+      line-height: 34px;
+      font-weight: bold;
+      color:#fff;
+      background: #3c7cf5;
+      padding-left:15px;
+      text-align: left;
+      p{
+        font-size: 16px;
+        margin:0;
+        span{
+          font-size: 12px;
+        }
+      }
+      a{
+        position:absolute;
+        top:0;
+        right:20px;
+        color:#fff;
+      }
+    }
     ul{
       margin-left:0;
+      overflow: hidden;
       li{
         line-height: 34px;
         text-align: center;
@@ -477,20 +526,6 @@
         &:nth-child(even){
           background: #f5f6f8;
         }
-        &:first-child{
-          font-weight: bold;
-          color:#fff;
-          background: #3c7cf5;
-          padding-left:15px;
-          text-align: left;
-          p{
-            font-size: 16px;
-            margin:0;
-            span{
-              font-size: 12px;
-            }
-          }
-        }
         &.empty{
           padding: 100px 0;
           font-size: 24px;

components/supplier/index.js

@@ -1,5 +1,6 @@
 import MerchantView from './merchant'
 import Resource from './resource'
 import DetailsView from './details'
+import Banner from './banner'
 
-export { MerchantView, Resource, DetailsView }
+export { MerchantView, Resource, DetailsView, Banner }

components/supplier/merchant.vue

@@ -16,7 +16,15 @@
         </div>
       </div>
     </div>
+
     <div class="list_info">
+      <div class="empty" v-if="list.content.length === 0">
+        <img src="/images/supplier/icon/empty.png">
+        <div class="info">
+          <p>暂无供应商信息</p>
+          <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+        </div>
+      </div>
       <ul class="list-inline">
         <li v-for="item in list.content" @click="jumpResource(item.enUU, item.hasProduct)">
           <div class="has_shop" v-if="item.isStore === 1">已开店</div>
@@ -221,6 +229,21 @@
   }
   .list_info{
     padding: 0 10px;
+    .empty{
+      height:418px;
+      border:15px solid #c4e9f9;
+      background: #eef9fd;
+      padding-top:165px;
+      text-align: center;
+      img{
+        vertical-align: top;
+        margin-right:15px;
+      }
+      .info{
+        display: inline-block;
+        padding-top:10px;
+      }
+    }
     > ul{
       margin-left:5px;
       li{

pages/supplier/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="supplier">
-    <carousel>
-      <kind-category @loadchild="loadProductKinds"></kind-category>
-    </carousel>
+    <!--<carousel>-->
+      <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
+    <!--</carousel>-->
+    <banner/>
     <merchant-view/>
   </div>
 </template>
 
 <script>
   import { KindCategory, Carousel } from '~components/home'
-  import { MerchantView } from '~components/supplier'
+  import { MerchantView, Banner } from '~components/supplier'
   export default {
     name: 'SupplierView',
     layout: 'main',
@@ -24,7 +25,8 @@
     components: {
       KindCategory,
       Carousel,
-      MerchantView
+      MerchantView,
+      Banner
     },
     methods: {
       loadProductKinds (id) {