首页悬浮

assets/scss/mobileCommon.scss

@@ -342,7 +342,7 @@ html {
 /*空状态*/
 .com-none-state{
   text-align: center;
-  padding:1.5rem 0;
+  padding: .6rem 0;
   background: #fff;
   margin-top:.1rem;
   width:100%;
@@ -354,7 +354,6 @@ html {
   p {
     font-size: .32rem;
     color: #999;
-    margin: 1.19rem 0 0 0;
   }
   a {
     display: block;

components/home/displayCard.vue

@@ -1,191 +1,91 @@
 <template>
   <div class="display-card">
-    <a><img src=""></a>
-     <div class="content">
+    <span @click="cardClose" v-if="cardShow" class="cardClose"><img src="/images/all/close.png"></span>
+     <div class="content" v-if="cardShow">
        <div>
-         <h4>供应商</h4>
-         <p>111</p>
+         <count-box></count-box>
        </div>
        <div>
-         <h4>交易金额</h4>
-         <p>111</p>
+         <p><span v-text="all"></span></p>
        </div>
        <div>
-         <h4>询价单</h4>
-         <p>111</p>
+         <p><span v-text="payMoney"></span></p>
        </div>
-       <a class="enter">立即入驻</a>
+       <div>
+         <p><span v-text="inquirySheet"></span></p>
+       </div>
+       <a class="enter" @click="onRegisterClick"><img src="/images/all/enter.png"></a>
      </div>
   </div>
 </template>
-<!--<script>
+<script>
+  import CountBox from '../main/count/Box.vue'
   export default {
-    name: 'kind-category',
+    name: 'display-card',
     data () {
       return {
-        activeKindId: 0
-        //      kinds: {}
+        cardShow: true
       }
     },
+    components: {
+      CountBox
+    },
     methods: {
-      showChildrenLayout (kind) {
-        if (!kind.leaf) {
-          this.activeKindId = kind.id
-          if (!kind.children) {
-            this.$emit('loadchild', kind.id)
-          }
-        }
+      cardClose () {
+        this.cardShow = false
       },
-      hideChildrenLayout () {
-        this.activeKindId = null
+      onRegisterClick () {
+        this.$http.get('/register/page').then(response => {
+          if (response.data) {
+            window.location.href = response.data.content
+          }
+        })
       }
     },
     computed: {
-      kinds () {
-        return this.$store.state.product.kind.kinds
+      payMoney () {
+        let count = this.$store.state.count.payMoney.data
+        let supplierCount = count.content ? count.totalElements + '' : '0'
+        return supplierCount
       },
-      kindsToShow () {
-        // 只显示前13个根类目
-        if (this.kinds.data) {
-          return this.kinds.data.slice(0, 13)
-        }
+      inquirySheet () {
+        let count = this.$store.state.count.inquirySheet.data
+        let supplierCount = count.content ? count.totalElements + '' : '0'
+        return supplierCount
+      },
+      all () {
+        let count = this.$store.state.supplier.merchant.merchantAll.data
+        let supplierCount = count.content ? count.totalElements + '' : '0'
+        return supplierCount
       }
     }
   }
-</script>-->
+</script>
 <style lang="scss" scoped>
-  /*@import '~assets/scss/variables';
-  .kind-children .kind-children-layout{
-    padding: 15px 0 0 0;
-  }
-  .kind-category {
-    position: absolute;
-    width: 200px;
-    height: 477px;
-
-    .kind-main {
-      margin: 0;
-      padding: 0;
-      z-index: 10;
-
-      .kind-main-item {
-        height: 34.1px;
-        line-height: 34.1px;
-        padding: 0 10px 0 20px;
-        background: rgba(80, 120, 203, 0.9);
-        display: block;
-
-        > a {
-          color: #fff;
-
-          > .iconfont {
-            opacity: 0;
-          }
-        }
-
-        &.item-more {
-          background-color: #4c66bb;
-          font-weight: bold;
-          font-size: 12px;
-        }
-
-        &.active,&:hover {
-          background-color: #a0b2eb;
-
-          > a {
-            font-weight: bold;
-
-            > .iconfont {
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
-
-    .kind-children {
-      position: absolute;
-      top: 0;
-      left: 200px;
-      z-index: 9;
-      box-shadow: 1px 0 3px #666;
-
-      .kind-children-layout {
-        background-color: #fff;
-        width: 990px;
-        height: 477px;
-        font-size: 12px;
-        overflow-y: auto;
-        a {
-          color: #000;
-        }
-        a:hover {
-          color: #ff0006;
-        }
-        .kind-children-item-wrap {
-          height: 100%;
-          width: 100%;
-
-          .kind-children-item {
-            margin-bottom: $md-pad;
-
-            dt {
-              span {
-                width: 90%;
-                display: inline-block;
-                font-weight: bold;
-                overflow: hidden;
-                clear: left;
-                text-align: right;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-              }
-              i{
-                font-size: 12px;
-              }
-            }
-
-            dd {
-              ul {
-                margin: 0;
-                padding: 0;
-
-                li {
-                  border-left: $border;
-                  margin-bottom: $pad;
-
-                  span {
-                    margin: 0 $sm-pad;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }*/
   .display-card{
-    position: absolute;
+    position: fixed;
+    right: 100px;
+    top: 115px;
     width: 144px;
-    height: 517px;
-    border: 1px solid black;
-    a{
-
+    height: 527px;
+    z-index: 100;
+    .cardClose{
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      opacity: 0.8;
     }
     .content{
-      width: 130px;
-      height: 499px;
-      border-radius: 63px;
-      background: blue;
+      margin-top: 10px;
+      width: 143px;
+      height: 517px;
+      background: url('/images/all/displayCard.png') no-repeat;
       div{
         height: 110px;
-        h4{
-          width: 100%;
-          text-align: center;
-          font-size: 18px;
-          color: #fff000;
-          font-family: MicrosoftYaHei-Bold;
+        padding-top: 55px;
+        &:first-child{
+          height: 110px;
+          padding-top: 1px;
         }
         p{
           width: 100%;
@@ -195,10 +95,12 @@
         }
       }
       .enter{
+        width: 100%;
         display: inline-block;
-        font-family: FZSKJW--GB1-0;
-        font-size: 25px;
-        color: #ffffff;
+        position: absolute;
+        bottom: 48px;
+        left: -4px;
+        text-align: center;
       }
     }
   }

components/main/Header.vue

@@ -15,9 +15,9 @@
         <search-box></search-box>
       </div>
       <!--统计-->
-      <div class="header-count pull-right">
+     <!-- <div class="header-count pull-right">
         <count-box></count-box>
-      </div>
+      </div>-->
     </div>
   </div>
 </template>

components/main/count/Box.vue

@@ -52,17 +52,13 @@
   .count-box {
     position: relative;
     top: 20px;
-    float: right;
-    width: 210px;
-    height: 40px;
+    width: 136px;
+    height: 100px;
     margin-right: 65px;
     overflow: hidden;
     border-radius: 3px;
-    background: url("/images/all/count_bg.png") no-repeat;
-    /*background: #7299E8;*/
   .swiper-slide{
     width: 100%;
-    /*background: #83c5f8;*/
     border-radius: 3px;
   }
 
@@ -71,3 +67,4 @@
   }
   }
 </style>
+

components/main/count/Item.vue

@@ -2,9 +2,7 @@
   <div class="count-item">
     <span class="title">{{ title }}</span>
     <div class="count-content">
-      <span v-for="(num, index) in nums" :class="num == '，' ? 'separator' : nums.length - len > index ? 'zero num' : 'num'">{{ num }}</span>
-      <!-- <span v-if="nums.length < 7">个</span>
-       <span v-if="nums.length > 7">万</span>-->
+      <span>{{ nums }}</span>
       <span v-text="isMore?'万':'个'" v-if="!isShow"></span>
       <span v-if="isShow">亿</span>
     </div>
@@ -31,7 +29,7 @@
     },
     methods: {
       formatNumber (num) {
-        let re = /(\d+)(\d{3})/
+//        let re = /(\d+)(\d{3})/
         if (num > 99999999) {
           this.isShow = true
           let str2 = num.toString()
@@ -51,10 +49,10 @@
         let length = String(num).length
         this.len = length > 3 ? length + 1 : length
         num = (Array(7 - length).join(0) + num)
-        while (re.test(num)) {
-          num = num.replace(re, '$1，$2')
-        }
-        num = num.split('')
+//        while (re.test(num)) {
+//          num = num.replace(re, '$1，$2')
+//        }
+//        num = num.split('')
 //        console.log(num)
         return num
       }
@@ -70,64 +68,48 @@
   @import '~assets/scss/variables';
 
   .count-item {
-    text-align: center;
-    line-height: 20px;
-
-  .title {
-    display: inline-block;
-    width: 55px;
-    float: left;
-    font-weight: bold;
-    line-height: 40px;
-    color: #fff;
-    font-size: 14px;
-  }
-  .separator, .num {
-    display: inline-block;
-  }
-  .separator {
-    font-size: 12px;
-    color: #7299E8;
-    line-height: 38px !important;
-    margin: 0 5px 0 -5px;
-    width: 3px;
-  }
-  .count-content{
-    width: 150px;
-    /*background: #fff;*/
-    float: right;
-    height: 30px;
-    margin-top: 5px;
-    padding-left: 3px;
-    margin-right: 5px;
-  span{
-    float: left;
-    line-height: 24px;
-    font-weight: bold;
-  }
-  span.zero{
-    color: #9EBCF7;
-  }
-  span:first-child{
-    margin-left: 3px;
-  }
-  span:last-child{
-    line-height: 30px;
-    color: #7299E8;
-    margin-left: 2px;
-  }
-  }
-  .num {
-    background: #7299E8;
-    width: 18px;
-    height: 24px;
-    margin-right: 2px;
-    line-height: 24px;
-    text-align: center;
-    color: $white;
-    font-weight: bold;
-    border-radius: 2px;
-    margin-top: 3px;
-  }
+    width: 100%;
+    height: auto;
+    .title {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      line-height: 40px;
+      color: #fff000;
+      font-size: 21px;
+      font-family: MicrosoftYaHei-Bold;
+    }
+    .count-content{
+      width: 100%;
+      height: 40px;
+      margin-top: -5px;
+      background: url('/images/all/count1.png') no-repeat center;
+      span:first-child{
+        position: relative;
+        top: 11px;
+        left: 14px;
+        display: block;
+        text-align: center;
+        width: 87px;
+        height: 23px;
+        line-height: 23px;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 21px;
+        color: #fff;
+        background-color: #376ef3;
+        border-radius: 2px;
+      }
+      span:last-child{
+        position: relative;
+        top: -17px;
+        right: 15px;
+        float: right;
+        line-height: 30px;
+        font-size: 16px;
+        color: #376ef3;
+        font-family: MicrosoftYaHei-Bold;
+      }
+    }
   }
 </style>
+

components/mobile/store/StoreDetail.vue

@@ -10,7 +10,7 @@
       <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
       <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
     </div>
-    <div class="store-info" v-if="activeType=='detail' && store.description && store.description.length">
+    <div class="store-info" v-if="activeType=='detail'">
      <div class="contact-info">
       <h4>联系我们</h4>
       <ul class="list-unstyled clearfix">
@@ -41,23 +41,26 @@
         </li>
         <li>
           <div>店铺地址：</div>
-          <div v-if="store.enterprise.enAddress">{{store.enterprise.address}}</div>
+          <div v-if="store.enterprise.address">{{store.enterprise.address}}</div>
           <div v-else><span>-</span></div>
         </li>
       </ul>
      </div>
       <div class="store-description">
         <h4>企业简介</h4>
-        <p>
+        <p class="content" v-if="store.description">
           {{store.description}}
         </p>
+        <div class="com-none-state" v-else>
+          <p>抱歉，暂无企业简介</p>
+        </div>
       </div>
     </div>
-    <div class="com-none-state" v-if="activeType=='detail' && (!store.description || !store.description.length)">
+  <!--  <div class="com-none-state" v-if="activeType=='detail'">
       <img src="/images/mobile/@2x/empty-collect.png">
       <p>抱歉，暂无店铺简介</p>
       <nuxt-link to="/">返回首页</nuxt-link>
-    </div>
+    </div>-->
     <div class="product-store" v-if="activeType == 'product'">
       <table v-if="commodities.content&&commodities.content.length > 0">
         <thead id="product-head" >
@@ -407,17 +410,17 @@
         width: 6.96rem;
         margin: .2rem auto;
         border-radius: .1rem;
-        p {
+        .content {
           text-indent:2em;
           background: #fff;
           margin: .2rem auto 0;
-          padding: .04rem .34rem;
+          padding: .04rem .34rem .4rem .34rem;
           width: 100%;
           font-size: .28rem;
           color: #666;
           text-align: left;
           height: 95%;
-          box-shadow: 0 .03rem .01rem 0 #cdcbcb96;
+          /*box-shadow: 0 .03rem .01rem 0 #cdcbcb96;*/
           line-height: .5rem;
           word-break: break-all;
         }

pages/index.vue

@@ -78,6 +78,9 @@
         store.dispatch('loadBanners', {type: 'home'}),
         store.dispatch('loadProductKinds', { id: 0 }),
         store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 }),
+        store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
+        store.dispatch('loadPayMoney', {page: 1, size: 20}),
+        store.dispatch('loadInquirySheet', {page: 1, size: 20}),
         store.dispatch('loadBatchCommodities', {batchCodeList: store.state.option.url === 'http://www.usoftmall.com' ? [
           'BT2018013000000043',
           'BT2018013000000026',

store/count.js

@@ -0,0 +1,33 @@
+export const state = () => ({
+  payMoney: {
+    fetching: false,
+    data: []
+  },
+  inquirySheet: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PAYMONEY (state) {
+    state.payMoney.fetching = true
+  },
+  GET_PAYMONEY_FAILURE (state) {
+    state.payMoney.fetching = false
+  },
+  GET_PAYMONEY_SUCCESS (state, result) {
+    state.payMoney.fetching = false
+    state.payMoney.data = result
+  },
+  REQUEST_INQUIRYSHEET (state) {
+    state.inquirySheet.fetching = true
+  },
+  GET_INQUIRYSHEET_FAILURE (state) {
+    state.inquirySheet.fetching = false
+  },
+  GET_INQUIRYSHEET_SUCCESS (state, result) {
+    state.inquirySheet.fetching = false
+    state.inquirySheet.data = result
+  }
+}

store/index.js

@@ -436,6 +436,25 @@ export const actions = {
       }, err => {
         commit('option/REQUEST_STORE_STATUS_FAILURE', err)
       })
+  },
+  // 获取首页展示交易金额数
+  loadPayMoney ({commit}, params) {
+    commit('count/REQUEST_PAYMONEY')
+    return axios.get('/vendor/introduction/vendor/list', {params})
+      .then(res => {
+        commit('count/GET_PAYMONEY_SUCCESS', res.data)
+      }, (err) => {
+        commit('count/GET_PAYMONEY_FAILURE', err)
+      })
+  },
+ // 获取首页展示询价单数
+  loadInquirySheet ({commit}, params) {
+    commit('count/REQUEST_INQUIRYSHEET')
+    return axios.get('/vendor/introduction/vendor/list', {params})
+      .then(res => {
+        commit('count/GET_INQUIRYSHEET_SUCCESS', res.data)
+      }, (err) => {
+        commit('count/GET_INQUIRYSHEET_FAILURE', err)
+      })
   }
 }
-