处理出入库

components/mobile/center/outOfStorage/StorageList.vue

@@ -1,57 +1,49 @@
 <template>
   <div class="storage">
-    <div class="com-mobile-header mobile-center-header">
-      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
-      <p>产品出入库</p>
-      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
-    </div>
-    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-storage-center">
-      <!--入库记录-->
-      <div>
-        <div class="storage-head">
-          <span class="inline-block" :class="{'active': switchType === 'inBound'}" @click="setSwitchType('inBound')">入库</span>
-          <span class="inline-block" :class="{'active': switchType === 'outBound'}" @click="setSwitchType('outBound')">出库</span>
+    <ul class="list-unstyled">
+      <li>
+        <div class="linetext">入库单： <span>21324</span></div>
+        <div class="linetext">买家名称： <span>21324</span></div>
+        <div class="linetext">类型： <span>21324</span></div>
+        <div class="linetext">录入人： <span>21324</span></div>
+        <div class="linetext">录入时间： <span>21324</span></div>
+        <div class="look-btn">
+          <span>查看更多</span>
         </div>
-        <div class="storage-record">
-          <div class="search-content clearfix">
-            <div class="search">
-              <input type="text" placeholder="卖家/发货单" class="staff-search">
-              <span><i class="iconfont icon-sousuo"></i></span>
-            </div>
-          </div>
-          <div class="tab-content">
-            <span :class="{'active': handleItem === 0}" @click="handleItem = 0">{{switchType === 'inBound' ? '查看入库记录' : '查看出库记录'}}</span>
-            <span :class="{'active': handleItem === 1}" @click="handleItem = 1">{{switchType === 'inBound' ? '其它入库' : '其它出库'}}</span>
-            <span :class="{'active': handleItem === 2}" @click="handleItem = 2">{{switchType === 'inBound' ? '采购入库' : '销售出库'}}</span>
-          </div>
-          <div class="list-content">
-
-          </div>
-          <!--<empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>-->
-          <!--<pull-up :fixId="'mobile-storage-center'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
-        </div>
-      </div>
-    </div>
-    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+      </li>
+    </ul>
   </div>
 </template>
 <script>
-  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
   export default {
-    layout: 'mobile',
     data () {
       return {
         remindText: '',
         timeoutCount: 0,
         switchType: 'inBound',
-        handleItem:0
+        handleItem:0,
+        filterOptions: [
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{
+              key: '30天',
+              val: 1
+            }, {
+              key: '90天',
+              val: 2
+            }, {
+              key: '180天',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 1
+          }
+        ]
       }
     },
-    components: {
-      RemindBox,
-      PullUp,
-      EmptyStatus
-    },
     methods: {
       onRemind: function (str) {
         this.remindText = str
@@ -59,83 +51,89 @@
       },
       setSwitchType (type) {
         this.switchType = type
-      }
+      },
+      setSelect (type, val) {
+        if (type === 'date') {
+          if (val) {
+            this.filterParams.fromDate = val.fromDate
+            this.filterParams.toDate = val.toDate
+          } else {
+            this.filterParams.fromDate = null
+            this.filterParams.toDate = null
+          }
+        } else {
+          this.filterParams[type] = val
+        }
+        this.filterRecord()
+      },
+      initFilterParams () {
+        this.filterParams = {
+          keyword: '',
+          fromDate: '',
+          toDate: '',
+          currencyName: '',
+          method: ''
+        }
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
+      },
+      filterRecord () {
+        this.page = 1
+        this.isChange = true
+        this.reloadList()
+      },
+      reloadList () {
+        if (this.switchType === 'account') {
+          this.$store.dispatch('payCenter/loadBuyerAccount', {
+            count: this.count,
+            page: this.page,
+            sorting: {num: 'ASC'},
+            type: 'buyer'
+          })
+        } else {
+          this.$store.dispatch('payCenter/loadBuyerRecord', {
+            count: this.count,
+            page: this.page,
+            sorting: {'paytime': 'DESC'},
+            currencyName: this.filterParams.currencyName || null,
+            fromDate: this.filterParams.fromDate || null,
+            toDate: this.filterParams.toDate || null,
+            remitteeType: this.filterParams.remitteeType || null,
+            keyword: this.filterParams.keyword || null
+          })
+        }
+      },
     }
   }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
   $base-color: #3f84f6;
-  #mobile-storage-center {
-    padding-bottom: .5rem;
-    margin: 0 auto;
-    .storage-head {
-      height: .82rem;
-      line-height: .82rem;
-      text-align: center;
-      background: #fff;
-      span {
-        font-size: .29rem;
-        &:last-child {
-          margin-left: 2.6rem;
-        }
-        &.active {
-          color: $base-color;
-          border-bottom: 1px solid $base-color;
-        }
-      }
-    }
-    .storage-record {
-      .search-content {
-        padding: .20rem 0;
-        text-align: center;
-        input {
-          margin: 0;
-          width: 7.1rem;
-          border: 1px solid $base-color;
+  .storage{
+    padding: 0.24rem 0.24rem;
+    background: #fff;
+    ul{
+      li{
+        .linetext{
+          color:#666;
+          margin-bottom: 0.24rem;
+          overflow: hidden;
+          -o-text-overflow: ellipsis;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          span{
+            color:#333;
+          }
         }
-      }
-      .tab-content{
-        margin: 0 auto .13rem;
-        width: 7.1rem;
-        overflow: hidden;
-        text-align: center;
-        span{
-          float: left;
-          display: inline-block;
-          width: 2.36rem;
-          height: .62rem;
-          line-height: .62rem;
+        .look-btn{
+          padding: 0.2rem 0;
+          border-top: 1px solid #d3d3d3;
           text-align: center;
-          color: #999999;
-          font-size: .26rem;
-          background-color: #ffffff;
-          border: solid 1px #d7d7d7;
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-          &.active{
-            background-color: #3f84f6;
-            border: none;
-            color: #fff;
-          }
-          &:first-child{
-            border-top-left-radius: .05rem;
-            border-bottom-left-radius: .05rem;
-          }
-          &:nth-child(2){
-            border-left: none;
-            border-right: none;
-          }
-          &:last-child{
-            border-top-right-radius: .05rem;
-            border-bottom-right-radius: .05rem;
+          a{
+
           }
         }
       }
-      .list-content{
-        margin: 0 auto;
-        padding: 0 .20rem;
-        margin-bottom:1.2rem;
-      }
     }
   }
 </style>

components/mobile/center/outOfStorage/detailStorage.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="storage">
+    <div class="storage-info">
+      <div class="linetext">入库单： <span>21324</span></div>
+      <div class="linetext">买家名称： <span>21324</span></div>
+      <div class="linetext">所属订单： <span>21324</span></div>
+      <div class="linetext"><em>*</em>物流公司：
+        <input type="text">
+      </div>
+      <div class="linetext"><em>*</em>物流单号：
+        <input type="text">
+      </div>
+      <div class="linetext">录入人： <span>21324</span></div>
+      <div class="linetext">录入时间： <span>21324</span></div>
+    </div>
+    <ul class="list-unstyled">
+      <li>
+        <div class="super"><span>1</span></div>
+        <div class="linetext">型号： <span>21324</span></div>
+        <div class="linetext">品牌： <span>21324</span></div>
+        <div class="linetext">物料名称： <span>21324</span></div>
+        <div class="linetext">规格： <span>21324</span></div>
+        <div class="linetext">应出库(PCS)： <span>21324</span></div>
+        <div class="linetext">已出库(PCS)： <span>21324</span></div>
+        <div class="linetext"><em>*</em>本次出库(PCS)： <span>21324</span></div>
+        <div class="linetext">单价($)： <span>21324</span></div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        switchType: 'inBound',
+        handleItem:0,
+        filterOptions: [
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{
+              key: '30天',
+              val: 1
+            }, {
+              key: '90天',
+              val: 2
+            }, {
+              key: '180天',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 1
+          }
+        ]
+      }
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      setSwitchType (type) {
+        this.switchType = type
+      },
+      setSelect (type, val) {
+        if (type === 'date') {
+          if (val) {
+            this.filterParams.fromDate = val.fromDate
+            this.filterParams.toDate = val.toDate
+          } else {
+            this.filterParams.fromDate = null
+            this.filterParams.toDate = null
+          }
+        } else {
+          this.filterParams[type] = val
+        }
+        this.filterRecord()
+      },
+      initFilterParams () {
+        this.filterParams = {
+          keyword: '',
+          fromDate: '',
+          toDate: '',
+          currencyName: '',
+          method: ''
+        }
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
+      },
+      filterRecord () {
+        this.page = 1
+        this.isChange = true
+        this.reloadList()
+      },
+      reloadList () {
+        if (this.switchType === 'account') {
+          this.$store.dispatch('payCenter/loadBuyerAccount', {
+            count: this.count,
+            page: this.page,
+            sorting: {num: 'ASC'},
+            type: 'buyer'
+          })
+        } else {
+          this.$store.dispatch('payCenter/loadBuyerRecord', {
+            count: this.count,
+            page: this.page,
+            sorting: {'paytime': 'DESC'},
+            currencyName: this.filterParams.currencyName || null,
+            fromDate: this.filterParams.fromDate || null,
+            toDate: this.filterParams.toDate || null,
+            remitteeType: this.filterParams.remitteeType || null,
+            keyword: this.filterParams.keyword || null
+          })
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  $base-color: #3f84f6;
+  .storage{
+    padding: 0.24rem 0.24rem;
+    background: #fff;
+    .linetext{
+      color:#666;
+      margin-bottom: 0.24rem;
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      span{
+        color:#333;
+      }
+    }
+    ul{
+      li{
+        .look-btn{
+          padding: 0.2rem 0;
+          border-top: 1px solid #d3d3d3;
+          text-align: center;
+          a{
+
+          }
+        }
+      }
+    }
+  }
+</style>

components/mobile/center/outOfStorage/index.js

@@ -1,3 +1,6 @@
 import StorageList from './StorageList.vue'
+import DetailStorage from './detailStorage'
+import OtherStorage from './otherStorage'
+import PurchaseStorage from './purchaseStorage'
 
-export { StorageList }
+export { StorageList, DetailStorage, OtherStorage, PurchaseStorage }

components/mobile/center/outOfStorage/otherStorage.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="storage">
+    <ul class="list-unstyled">
+      <li>
+        <div class="linetext">入库单： <span>21324</span></div>
+        <div class="linetext">买家名称： <span>21324</span></div>
+        <div class="linetext">类型： <span>21324</span></div>
+        <div class="linetext">录入人： <span>21324</span></div>
+        <div class="linetext">录入时间： <span>21324</span></div>
+        <div class="look-btn">
+          <span>查看更多</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        switchType: 'inBound',
+        handleItem:0,
+        filterOptions: [
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{
+              key: '30天',
+              val: 1
+            }, {
+              key: '90天',
+              val: 2
+            }, {
+              key: '180天',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 1
+          }
+        ]
+      }
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      setSwitchType (type) {
+        this.switchType = type
+      },
+      setSelect (type, val) {
+        if (type === 'date') {
+          if (val) {
+            this.filterParams.fromDate = val.fromDate
+            this.filterParams.toDate = val.toDate
+          } else {
+            this.filterParams.fromDate = null
+            this.filterParams.toDate = null
+          }
+        } else {
+          this.filterParams[type] = val
+        }
+        this.filterRecord()
+      },
+      initFilterParams () {
+        this.filterParams = {
+          keyword: '',
+          fromDate: '',
+          toDate: '',
+          currencyName: '',
+          method: ''
+        }
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
+      },
+      filterRecord () {
+        this.page = 1
+        this.isChange = true
+        this.reloadList()
+      },
+      reloadList () {
+        if (this.switchType === 'account') {
+          this.$store.dispatch('payCenter/loadBuyerAccount', {
+            count: this.count,
+            page: this.page,
+            sorting: {num: 'ASC'},
+            type: 'buyer'
+          })
+        } else {
+          this.$store.dispatch('payCenter/loadBuyerRecord', {
+            count: this.count,
+            page: this.page,
+            sorting: {'paytime': 'DESC'},
+            currencyName: this.filterParams.currencyName || null,
+            fromDate: this.filterParams.fromDate || null,
+            toDate: this.filterParams.toDate || null,
+            remitteeType: this.filterParams.remitteeType || null,
+            keyword: this.filterParams.keyword || null
+          })
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  $base-color: #3f84f6;
+  .storage{
+    padding: 0.24rem 0.24rem;
+    background: #fff;
+    ul{
+      li{
+        .linetext{
+          color:#666;
+          margin-bottom: 0.24rem;
+          overflow: hidden;
+          -o-text-overflow: ellipsis;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          span{
+            color:#333;
+          }
+        }
+        .look-btn{
+          padding: 0.2rem 0;
+          border-top: 1px solid #d3d3d3;
+          text-align: center;
+          a{
+
+          }
+        }
+      }
+    }
+  }
+</style>

components/mobile/center/outOfStorage/purchaseStorage.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="storage">
+    <ul class="list-unstyled">
+      <li>
+        <div class="linetext">入库单： <span>21324</span></div>
+        <div class="linetext">买家名称： <span>21324</span></div>
+        <div class="linetext">类型： <span>21324</span></div>
+        <div class="linetext">录入人： <span>21324</span></div>
+        <div class="linetext">录入时间： <span>21324</span></div>
+        <div class="look-btn">
+          <span>查看更多</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        switchType: 'inBound',
+        handleItem:0,
+        filterOptions: [
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{
+              key: '30天',
+              val: 1
+            }, {
+              key: '90天',
+              val: 2
+            }, {
+              key: '180天',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 1
+          }
+        ]
+      }
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      setSwitchType (type) {
+        this.switchType = type
+      },
+      setSelect (type, val) {
+        if (type === 'date') {
+          if (val) {
+            this.filterParams.fromDate = val.fromDate
+            this.filterParams.toDate = val.toDate
+          } else {
+            this.filterParams.fromDate = null
+            this.filterParams.toDate = null
+          }
+        } else {
+          this.filterParams[type] = val
+        }
+        this.filterRecord()
+      },
+      initFilterParams () {
+        this.filterParams = {
+          keyword: '',
+          fromDate: '',
+          toDate: '',
+          currencyName: '',
+          method: ''
+        }
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
+      },
+      filterRecord () {
+        this.page = 1
+        this.isChange = true
+        this.reloadList()
+      },
+      reloadList () {
+        if (this.switchType === 'account') {
+          this.$store.dispatch('payCenter/loadBuyerAccount', {
+            count: this.count,
+            page: this.page,
+            sorting: {num: 'ASC'},
+            type: 'buyer'
+          })
+        } else {
+          this.$store.dispatch('payCenter/loadBuyerRecord', {
+            count: this.count,
+            page: this.page,
+            sorting: {'paytime': 'DESC'},
+            currencyName: this.filterParams.currencyName || null,
+            fromDate: this.filterParams.fromDate || null,
+            toDate: this.filterParams.toDate || null,
+            remitteeType: this.filterParams.remitteeType || null,
+            keyword: this.filterParams.keyword || null
+          })
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  $base-color: #3f84f6;
+  .storage{
+    padding: 0.24rem 0.24rem;
+    background: #fff;
+    ul{
+      li{
+        .linetext{
+          color:#666;
+          margin-bottom: 0.24rem;
+          overflow: hidden;
+          -o-text-overflow: ellipsis;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          span{
+            color:#333;
+          }
+        }
+        .look-btn{
+          padding: 0.2rem 0;
+          border-top: 1px solid #d3d3d3;
+          text-align: center;
+          a{
+
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/center/user/index.vue

@@ -84,7 +84,7 @@
         store.dispatch('shop/loadStoreCollectInfo')
       ]
      if (user.enterprise.uu) {
-       promises.push(store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0}))
+       // promises.push(store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0}))
      }
       return Promise.all(promises)
     },

pages/mobile/center/vendor/index.vue

@@ -20,6 +20,10 @@
             <img src="/images/mobile/center/vendor/material-person.png" alt="">
             <p>个人产品库</p>
           </nuxt-link>
+          <nuxt-link tag="li" to="/mobile/center/vendor/outOfStorage?providerType=person">
+            <img src="/images/mobile/center/vendor/material-person.png" alt="">
+            <p>出入库</p>
+          </nuxt-link>
           <nuxt-link tag="li" to="/mobile/center/vendor/product?providerType=onLine">
             <img src="/images/mobile/center/vendor/onsale.png" alt="">
             <p>在售产品</p>
@@ -88,7 +92,7 @@
      let user = store.state.option.user.data
       return Promise.all([
         store.dispatch('loadStoreStatus', { op: 'check' }),
-        store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0})
+        // store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0})
       ])
     },
     components: {

pages/mobile/center/vendor/outOfStorage/index.vue

@@ -1,15 +1,242 @@
 <template>
-  <div>
-    <storage-list/>
+  <div class="storage">
+    <div class="com-mobile-header mobile-center-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>产品出入库</p>
+      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
+    </div>
+    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-storage-center">
+      <!--入库记录-->
+      <div>
+        <div class="storage-head">
+          <span class="inline-block" :class="{'active': switchType === 'inBound'}" @click="setSwitchType('inBound')">入库</span>
+          <span class="inline-block" :class="{'active': switchType === 'outBound'}" @click="setSwitchType('outBound')">出库</span>
+        </div>
+        <div class="storage-record">
+          <div class="search-content clearfix">
+            <div class="search">
+              <input type="text" placeholder="卖家/发货单" class="staff-search">
+              <span><i class="iconfont icon-sousuo"></i></span>
+            </div>
+          </div>
+          <div class="tab-content">
+            <span :class="{'active': handleItem === 0}" @click="handleItem = 0">{{switchType === 'inBound' ? '查看入库记录' : '查看出库记录'}}</span>
+            <span :class="{'active': handleItem === 1}" @click="handleItem = 1">{{switchType === 'inBound' ? '其它入库' : '其它出库'}}</span>
+            <span v-if="switchType === 'outBound'" :class="{'active': handleItem === 2}" @click="handleItem = 2">{{switchType === 'inBound' ? '采购入库' : '销售出库'}}</span>
+          </div>
+          <div class="filters-wrap">
+            <base-filter
+              v-for="filterOption in filterOptions"
+              :key="filterOption.selectOption"
+              :selectItems="filterOption.selectItems"
+              :defaultVal="filterOption.defaultVal"
+              :selectOption="filterOption.selectOption"
+              @selectAction="onSelectAction"
+              :title="filterOption.title">
+            </base-filter>
+          </div>
+          <div class="list-content">
+            <storage-list :listData="listData"></storage-list>
+            <detail-storage></detail-storage>
+            <other-storage></other-storage>
+            <purchase-storage></purchase-storage>
+          </div>
+          <!--<empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>-->
+          <!--<pull-up :fixId="'mobile-storage-center'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
+        </div>
+      </div>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
-  import { StorageList } from '~components/mobile/center/outOfStorage'
+  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
+  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
+  import { StorageList, DetailStorage, OtherStorage, PurchaseStorage } from '~components/mobile/center/outOfStorage'
   export default {
     middleware: 'authenticated',
     layout: 'mobile',
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        switchType: 'inBound',
+        handleItem:0,
+        filterOptions: [
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{
+              key: '30天',
+              val: 1
+            }, {
+              key: '90天',
+              val: 2
+            }, {
+              key: '180天',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 1
+          }
+        ]
+      }
+    },
     components: {
-      StorageList
+      RemindBox,
+      PullUp,
+      EmptyStatus,
+      BaseFilter,
+      StorageList,
+      DetailStorage,
+      OtherStorage,
+      PurchaseStorage
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      setSwitchType (type) {
+        this.switchType = type
+      },
+      setSelect (type, val) {
+        if (type === 'date') {
+          if (val) {
+            this.filterParams.fromDate = val.fromDate
+            this.filterParams.toDate = val.toDate
+          } else {
+            this.filterParams.fromDate = null
+            this.filterParams.toDate = null
+          }
+        } else {
+          this.filterParams[type] = val
+        }
+        this.filterRecord()
+      },
+      initFilterParams () {
+        this.filterParams = {
+          keyword: '',
+          fromDate: '',
+          toDate: '',
+          currencyName: '',
+          method: ''
+        }
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
+      },
+      filterRecord () {
+        this.page = 1
+        this.isChange = true
+        this.reloadList()
+      },
+      reloadList () {
+        if (this.switchType === 'account') {
+          this.$store.dispatch('payCenter/loadBuyerAccount', {
+            count: this.count,
+            page: this.page,
+            sorting: {num: 'ASC'},
+            type: 'buyer'
+          })
+        } else {
+          this.$store.dispatch('payCenter/loadBuyerRecord', {
+            count: this.count,
+            page: this.page,
+            sorting: {'paytime': 'DESC'},
+            currencyName: this.filterParams.currencyName || null,
+            fromDate: this.filterParams.fromDate || null,
+            toDate: this.filterParams.toDate || null,
+            remitteeType: this.filterParams.remitteeType || null,
+            keyword: this.filterParams.keyword || null
+          })
+        }
+      },
     }
   }
 </script>
+<style lang="scss">
+  $base-color: #3f84f6;
+  #mobile-storage-center {
+    padding-bottom: .5rem;
+    margin: 0 auto;
+    .storage-head {
+      height: .82rem;
+      line-height: .82rem;
+      text-align: center;
+      background: #fff;
+      span {
+        font-size: .29rem;
+        &:last-child {
+          margin-left: 2.6rem;
+        }
+        &.active {
+          color: $base-color;
+          border-bottom: 1px solid $base-color;
+        }
+      }
+    }
+    .storage-record {
+      .search-content {
+        padding: .20rem 0;
+        text-align: center;
+        input {
+          margin: 0;
+          width: 7.1rem;
+          border: 1px solid $base-color;
+        }
+      }
+      .tab-content{
+        margin: 0 auto .13rem;
+        width: 7.1rem;
+        overflow: hidden;
+        text-align: center;
+        span{
+          float: left;
+          display: inline-block;
+          width: 2.36rem;
+          height: .62rem;
+          line-height: .62rem;
+          text-align: center;
+          color: #999999;
+          font-size: .26rem;
+          background-color: #ffffff;
+          border: solid 1px #d7d7d7;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          &.active{
+            background-color: #3f84f6;
+            border: none;
+            color: #fff;
+          }
+          &:first-child{
+            border-top-left-radius: .05rem;
+            border-bottom-left-radius: .05rem;
+          }
+          &:nth-child(2){
+            border-left: none;
+            border-right: none;
+          }
+          &:last-child{
+            border-top-right-radius: .05rem;
+            border-bottom-right-radius: .05rem;
+          }
+        }
+      }
+      .filters-wrap{
+        background: #fff;
+        margin: 0 auto .13rem;
+        width: 7.1rem;
+        overflow: hidden;
+        padding: .1rem;
+      }
+      .list-content{
+        margin: 0 auto;
+        padding: 0 .20rem;
+        margin-bottom:1.2rem;
+      }
+    }
+  }
+</style>