首页计数器修改

components/applyPurchase/BusinessOpportunities.vue

@@ -3,13 +3,13 @@
     <div class="apply-info">
       <p class="title">如何获取商机<span></span></p>
       <p> <img src="/images/applyPurchase/title1.png" alt="">怎么样才能坐拥<span>商机</span>，<span style="color: #3c7df5; font-size: 18px;">客似云来？</span></p>
-      <p> <img src="/images/applyPurchase/title2.png" alt="">优软云月均<span>三万多张采购询价单</span>，大数据将为你匹配推送<span>商机</span></p>
+      <p> <img src="/images/applyPurchase/title2.png" alt="">优软商城<span>海量采购询价单</span>，大数据将为你匹配推送<span>商机</span></p>
       <p> <img src="/images/applyPurchase/title1.png" alt="">为什么我没收到<span>推送</span>的<span>信息</span>呢？</p>
-      <p> <img src="/images/applyPurchase/title2.png" alt="">您需维护您的<span>个人产品库</span>，越丰富商机越多</p>
+      <p> <img src="/images/applyPurchase/title2.png" alt="">您需维护您的<span>产品库</span>，越丰富商机越多</p>
 
       <img class="process" src="/images/applyPurchase/business11.png" alt="">
       <img class="process" src="/images/applyPurchase/business22.png" alt="">
-      <p class="process-info">买家发出的<span>公共采购询价单</span>将会通过<span>“优软云数据中心”</span>自动匹配和精准推送给<span>个人产品库</span>的有该产品的卖家。</p>
+      <p class="process-info">买家发出的<span>公共采购询价单</span>将会通过<span>“数据中心”</span>自动匹配和精准推送给<span>产品库</span>的有该产品的卖家。</p>
 
       <img src="/images/applyPurchase/business33.png" alt="">
       <div class="case-info"><img id="case" src="/images/applyPurchase/case.png" alt=""><p class="case">买方发布“型号RHU002N06T106”的公共采购询价，“云数据中心”将匹配卖家用户的个人产品库是否有该型号，如果个人产品库有该型号即可以收到该商机推送，如果个人产品库没有该型号即收不到该商机推送。</p></div>
@@ -109,7 +109,7 @@
       }
       .process-info{
         padding: 34px 0px 40px 0px;
-        width: 900px;
+        width: 768px;
         margin: 0 auto;
         font-size: 16px;
         span{

components/home/count/countItem.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="count-item">
+      <span>{{ nums }}</span>
+      <span v-text="isMore?'万':'个'" v-if="!isShow"></span>
+      <span v-if="isShow">亿</span>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'count-item',
+    props: {
+      value: {
+        default: 0,
+        type: Number
+      }
+    },
+    data () {
+      return {
+        isMore: false,
+        isShow: false,
+        len: 0
+      }
+    },
+    methods: {
+      formatNumber (num) {
+//        let re = /(\d+)(\d{3})/
+        if (num > 99999999) {
+          this.isShow = true
+          let str2 = num.toString()
+          num = Math.floor(num / 100000000)
+          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
+            num = num + 1
+          }
+        }
+        if (num > 9999) {
+          this.isMore = true
+          let str = num.toString()
+          num = Math.floor(num / 10000)
+          if (parseInt(str.charAt(str.length - 4)) > 4) {
+            num = num + 1
+          }
+        }
+        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('')
+//        console.log(num)
+        return num
+      }
+    },
+    computed: {
+      nums () {
+        return this.formatNumber(this.value)
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+  .count-item {
+    width: 100%;
+    height: 30px;
+      span{
+        &:last-child{
+          font-size: 16px;
+          color: #376ef3;
+          font-family: MicrosoftYaHei-Bold;
+          padding: 0px 15px 0px 11px;
+          position: relative;
+          top: -2px;
+        }
+      }
+  }
+</style>
+

components/home/count/displayCard.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="display-card">
+    <span @click="cardClose" v-if="cardShow" class="cardClose"><img src="/images/all/close.png"></span>
+     <div class="content" v-if="cardShow">
+       <div>
+         <ul class="list-unstyled">
+           <li v-for="(item, index) in title" :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
+             <span>{{item}}</span>
+           </li>
+         </ul>
+         <ul class="list-unstyled">
+           <li v-for="(c, index) in counts.data" :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
+             <count-item :value ="c.count"></count-item>
+           </li>
+         </ul>
+       </div>
+       <div>
+         <p><span>{{all}}家</span>
+         </p>
+       </div>
+       <div>
+         <p v-if="payMoney">
+           <span>{{payMoney}}</span>
+         </p>
+         <p v-else><span>0元</span></p>
+       </div>
+       <div>
+         <p v-if="payMoneyLast">
+           <span>{{payMoneyLast}}</span>
+         </p>
+         <p v-else><span>0元</span></p>
+       </div>
+       <div>
+         <p v-if="inquirySheet">
+           <span>{{inquirySheet}}条</span>
+         </p>
+         <p v-else><span>0条</span></p>
+       </div>
+       <div>
+         <p v-if="inquirySheetLast">
+           <span>{{inquirySheetLast}}条</span>
+         </p>
+         <p v-else><span>0条</span></p>
+       </div>
+       <a class="enter" @click="goStoreApply()">
+         <img src="/images/all/enter.png">
+       </a>
+     </div>
+  </div>
+</template>
+<script>
+  import CountItem from './countItem.vue'
+  export default {
+    name: 'display-card',
+    data () {
+      return {
+        cardShow: true,
+        timerIndex: 0,
+        isTop: false, // 判断是否滚动至顶,
+        timer: {}, // 定时器实体
+        title: [ '品牌', '现货', '规格书' ]
+      }
+    },
+    components: {
+      CountItem
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.changeInterval(true)
+      })
+    },
+    methods: {
+      changeInterval: function (flag) {
+        if (flag) {
+          this.timer = setInterval(() => {
+            this.timerIndex ++
+            this.isTop = (this.timerIndex % 3 === 0)
+            if (this.isTop) {
+              this.timerIndex = 0
+            }
+          }, 3000)
+        } else {
+          clearInterval(this.timer)
+        }
+      },
+      cardClose () {
+        this.cardShow = false
+      },
+      formatNumber (num, type) {
+        if (num.toString().indexOf('E') !== -1) {
+          let arr = num.toString().split('E')
+          num = arr[0] * Math.pow(10, arr[1])
+        }
+        if (num > 99999999) {
+          let str2 = num.toString()
+          num = Math.floor(num / 100000000)
+          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
+            num = num + 1
+          }
+          num += '亿'
+        } else if (num > 9999) {
+          let str = num.toString()
+          num = Math.floor(num / 10000)
+          if (parseInt(str.charAt(str.length - 4)) > 4) {
+            num = num + 1
+          }
+          num += '万'
+        } else {
+          if (type === 1 || type === 2) {
+            num += '元'
+          } else {
+            num += ''
+          }
+        }
+        return num
+      },
+      goStoreApply: function () {
+        if (this.user.logged) {
+          if (this.enterprise && this.enterprise.isVendor === 313) {
+            window.location.href = '/vendor#/index'
+          } else {
+            this.$router.push('/register-saler')
+          }
+        } else {
+          this.$router.push('/auth/login')
+        }
+      }
+    },
+    computed: {
+      allCount () {
+        return this.$store.state.count.allCount.data
+      },
+      payMoneyLast () {
+        return this.allCount[0] ? this.formatNumber(this.allCount[0].count, 2) : 0
+      },
+      payMoney () {
+        return this.allCount[1] ? this.formatNumber(this.allCount[1].count, 1) : 0
+      },
+      inquirySheet () {
+        let sheetNum = this.$store.state.count.inquirySheet.data.count
+        return this.formatNumber(sheetNum, 3)
+      },
+      inquirySheetLast () {
+        let lastSheetNum = this.$store.state.count.inquirySheetLast.data.count
+        return this.formatNumber(lastSheetNum, 4)
+      },
+      all () {
+        let count = this.$store.state.supplier.merchant.merchantAll.data
+        let supplierCount = count.content ? count.totalElements + '' : '0'
+        return this.formatNumber(supplierCount, 0)
+      },
+      counts () {
+        return this.$store.state.product.common.counts
+      },
+      enterprise () {
+        return this.user.data.enterprise
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .display-card{
+    position: fixed;
+    right: 100px;
+    top: 115px;
+    width: 144px;
+    height: 527px;
+    z-index: 100;
+    .cardClose{
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      opacity: 0.8;
+    }
+    .content{
+      margin-top: 10px;
+      width: 143px;
+      height: 517px;
+      background: url('/images/all/displayCard.png') no-repeat;
+      div{
+        height: 66px;
+        width: 136px;
+        padding-top: 30px;
+        &:first-child{
+          height: 96px;
+          padding-top: 1px;
+          ul{
+            &:first-child{
+                max-height: 30px;
+                width: 100%;
+                text-align: center;
+                overflow: hidden;
+                position: relative;
+                top: 16px;
+                li{
+                  height: 30px;
+                  line-height: 30px;
+                  font-weight: bold;
+                  font-size: 21px;
+                  letter-spacing: 0px;
+                  color: #fff000;
+                  position: relative;
+                  top: 0;
+                  transition: top 1s;
+                  -moz-transition: top 1s; /* Firefox 4 */
+                  -webkit-transition: top 1s; /* Safari and Chrome */
+                  -o-transition: top 1s; /* Opera */
+                  &.top {
+                    transition: top 0s;
+                    -moz-transition: top 0s; /* Firefox 4 */
+                    -webkit-transition: top 0s; /* Safari and Chrome */
+                    -o-transition: top 0s; /* Opera */
+                  }
+                }
+              }
+            &:last-child{
+              max-height: 30px;
+              width: 100%;
+              overflow: hidden;
+              position: relative;
+              top: 21px;
+              text-align: right;
+              li{
+                height: 30px;
+                line-height: 30px;
+                font-weight: bold;
+                font-size: 21px;
+                color: #fff;
+                position: relative;
+                top: 0;
+                transition: top 1s;
+                -moz-transition: top 1s; /* Firefox 4 */
+                -webkit-transition: top 1s; /* Safari and Chrome */
+                -o-transition: top 1s; /* Opera */
+                &.top {
+                  transition: top 0s;
+                  -moz-transition: top 0s; /* Firefox 4 */
+                  -webkit-transition: top 0s; /* Safari and Chrome */
+                  -o-transition: top 0s; /* Opera */
+                }
+              }
+            }
+          }
+        }
+        p{
+          width: 100%;
+          text-align: center;
+          font-size: 24px;
+          color: #fff;
+        }
+      }
+      .enter{
+        width: 100%;
+        display: inline-block;
+        position: absolute;
+        bottom: 28px;
+        left: -4px;
+        text-align: center;
+      }
+    }
+  }
+</style>

components/home/displayCard.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="display-card">
-    <span @click="cardClose" v-if="cardShow" class="cardClose"><img src="/images/all/close.png"></span>
-     <div class="content" v-if="cardShow">
-       <div>
-         <count-box></count-box>
-       </div>
-       <div>
-         <p><span>{{all}}家</span></p>
-       </div>
-       <div>
-         <p v-if="payMoney">
-           <span>{{payMoney}}</span>
-           <span v-text="isMore?'万':'元'" v-if="!isShow"></span>
-           <span v-if="isShow">亿</span>
-         </p>
-         <p v-else><span>0元</span></p>
-       </div>
-       <div>
-         <p v-if="inquirySheet.count">
-           <span>{{inquirySheet.count}}条</span>
-         </p>
-         <p v-else><span>0条</span></p>
-       </div>
-       <a class="enter" @click="goStoreApply()">
-         <img src="/images/all/enter.png">
-       </a>
-     </div>
-  </div>
-</template>
-<script>
-  import CountBox from '../main/count/Box.vue'
-  export default {
-    name: 'display-card',
-    data () {
-      return {
-        cardShow: true,
-        isShow: false,
-        isMore: false
-      }
-    },
-    components: {
-      CountBox
-    },
-    methods: {
-      cardClose () {
-        this.cardShow = false
-      },
-      formatNumber (num) {
-        if (num.toString().indexOf('E') !== -1) {
-          let arr = num.toString().split('E')
-          num = arr[0] * Math.pow(10, arr[1])
-        }
-        if (num > 99999999) {
-          this.isShow = true
-          let str2 = num.toString()
-          num = Math.floor(num / 100000000)
-          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
-            num = num + 1
-          }
-        }
-        if (num > 9999) {
-          this.isMore = true
-          let str = num.toString()
-          num = Math.floor(num / 10000)
-          if (parseInt(str.charAt(str.length - 4)) > 4) {
-            num = num + 1
-          }
-        }
-        return num
-      },
-      goStoreApply: function () {
-        if (this.user.logged) {
-          if (this.enterprise && this.enterprise.isVendor === 313) {
-            window.location.href = '/vendor#/index'
-          } else {
-            this.$router.push('/register-saler')
-          }
-        } else {
-          this.$router.push('/auth/login')
-        }
-      }
-    },
-    computed: {
-      allCount () {
-        return this.$store.state.count.allCount.data
-      },
-      payMoney () {
-        return this.allCount[0] ? this.formatNumber(this.allCount[0].count) : 0
-      },
-      inquirySheet () {
-        return this.$store.state.count.inquirySheet.data
-      },
-      all () {
-        let count = this.$store.state.supplier.merchant.merchantAll.data
-        let supplierCount = count.content ? count.totalElements + '' : '0'
-        return supplierCount
-      },
-      enterprise () {
-        return this.user.data.enterprise
-      }
-    }
-  }
-</script>
-<style lang="scss" scoped>
-  .display-card{
-    position: fixed;
-    right: 100px;
-    top: 115px;
-    width: 144px;
-    height: 527px;
-    z-index: 100;
-    .cardClose{
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      opacity: 0.8;
-    }
-    .content{
-      margin-top: 10px;
-      width: 143px;
-      height: 517px;
-      background: url('/images/all/displayCard.png') no-repeat;
-      div{
-        height: 110px;
-        padding-top: 55px;
-        &:first-child{
-          height: 110px;
-          padding-top: 1px;
-        }
-        p{
-          width: 100%;
-          text-align: center;
-          font-size: 26px;
-          color: #fff;
-        }
-      }
-      .enter{
-        width: 100%;
-        display: inline-block;
-        position: absolute;
-        bottom: 48px;
-        left: -4px;
-        text-align: center;
-      }
-    }
-  }
-</style>

components/home/index.js

@@ -1,5 +1,5 @@
 import KindCategory from './KindCategory.vue'
-import displayCard from './displayCard.vue'
+import displayCard from './count/displayCard.vue'
 import Carousel from './Carousel.vue'
 import Advert from './Advert.vue'
 import FloorList from './floor/FloorList.vue'

components/main/count/Item.vue

@@ -83,7 +83,7 @@
       width: 100%;
       height: 40px;
       margin-top: -5px;
-      background: url('/images/all/count1.png') no-repeat center;
+      /*background: url('/images/all/count1.png') no-repeat center;*/
       span:first-child{
         position: relative;
         top: 11px;

pages/index.vue

@@ -22,7 +22,6 @@
   import { KindCategory, displayCard, Carousel, Advert, FloorList, Partner, News } from '~components/home'
 //  import { Christmas, NewYear } from '~components/default'
   import { Home } from '~components/mobile'
-
   export default {
     name: 'index',
     middleware: 'wechatInfo',
@@ -74,6 +73,10 @@
       Home
     },
     fetch ({store}) {
+      let today = new Date()
+      let nowYear = today.getFullYear()
+      let nowMonth = today.getMonth() + 1
+      let LastMonth = today.getMonth()
       return !store.state.option.isMobile ? Promise.all([
         store.dispatch('loadFloors'),
         store.dispatch('loadBanners', {type: 'home'}),
@@ -81,7 +84,8 @@
         store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 }),
         store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
         store.dispatch('loadAllCount', {_status: 'actived', usedFor: 'mall_home_banner'}),
-        store.dispatch('loadInquirySheet'),
+        store.dispatch('loadInquirySheet', {year: nowYear, month: nowMonth}),
+        store.dispatch('loadInquirySheetLast', {year: nowYear, month: LastMonth}),
         store.dispatch('loadBatchCommodities', {batchCodeList: store.state.option.url === 'http://www.usoftmall.com' ? [
           'BT2018013000000043',
           'BT2018013000000026',
@@ -121,7 +125,7 @@
       isMobile: function () {
         return this.$store.state.option.isMobile
       }
-    },
+  },
     methods: {
       listenOpen () {
         this.isOpen = false

store/count.js

@@ -6,6 +6,10 @@ export const state = () => ({
   inquirySheet: {
     fetching: false,
     data: []
+  },
+  inquirySheetLast: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +33,15 @@ export const mutations = {
   GET_INQUIRYSHEET_SUCCESS (state, result) {
     state.inquirySheet.fetching = false
     state.inquirySheet.data = result
+  },
+  REQUEST_INQUIRYSHEETLAST (state) {
+    state.inquirySheetLast.fetching = true
+  },
+  GET_INQUIRYSHEETLAST_FAILURE (state) {
+    state.inquirySheetLast.fetching = false
+  },
+  GET_INQUIRYSHEETLAST_SUCCESS (state, result) {
+    state.inquirySheetLast.fetching = false
+    state.inquirySheetLast.data = result
   }
 }

store/index.js

@@ -448,15 +448,24 @@ export const actions = {
       })
   },
   // 获取首页悬浮计数器询价单
-  loadInquirySheet ({commit}) {
+  loadInquirySheet ({commit}, params) {
     commit('count/REQUEST_INQUIRYSHEET')
-    return axios.get('/inquiry/public/getPurcInquiryItemCount')
+    return axios.get('/inquiry/public/getPurcInquiryItemCountByMonth', {params})
       .then(res => {
         commit('count/GET_INQUIRYSHEET_SUCCESS', res.data)
       }, (err) => {
         commit('count/GET_INQUIRYSHEET_FAILURE', err)
       })
   },
+  loadInquirySheetLast ({commit}, params) {
+    commit('count/REQUEST_INQUIRYSHEETLAST')
+    return axios.get('/inquiry/public/getPurcInquiryItemCountByMonth', {params})
+      .then(res => {
+        commit('count/GET_INQUIRYSHEETLAST_SUCCESS', res.data)
+      }, (err) => {
+        commit('count/GET_INQUIRYSHEETLAST_FAILURE', err)
+      })
+  },
   // 保存微信信息
   GerWechatInfo({ commit }, params = {}) {
     commit('option/REQUEST_WECHATINFO_STATUS')