Merge remote-tracking branch 'origin/feature-201821-wangcz' into feature-201821-wangcz

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css" />
   <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>-->
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_2ne91qekhfk.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_2swn48l3ywz.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" />
   <!--<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>-->
   {{ HEAD }}

assets/scss/mobileCommon.scss

@@ -686,3 +686,22 @@ table.com-price-list {
     }
   }
 }
+
+.com-btn-wrap {
+  text-align: center;
+  button {
+    width: 6.59rem;
+    height: .77rem;
+    line-height: .77rem;
+    text-align: center;
+    background: #3f84f6;
+    border: 1px solid #3f84f6;
+    border-radius: .08rem;
+    color: #fff;
+    font-size: .32rem;
+    i {
+      font-size: .3rem;
+      margin-right: .08rem;
+    }
+  }
+}

assets/scss/mobileInvoice.scss

@@ -5,10 +5,12 @@ $blue-base: #3f84f6;
     border-bottom: .28rem solid #f1f3f6;
   }
   .mi-remind-area {
-    padding: .24rem .3rem;
+    padding: .24rem 0.15rem;
     font-size: .28rem;
     color: #333;
     line-height: .42rem;
+    margin: 0 0.24rem;
+    background: #fff;
     .more {
       font-size: .24rem;
       color: $blue-base;

assets/scss/mobilePayCenter.scss

@@ -17,7 +17,7 @@ $base-color: #3f84f6;
     }
   }
   .mp-content {
-    padding: 0 .3rem;
+    padding: .2rem .3rem 0;
     .mp-content-header {
       font-size: .28rem;
       font-weight: bold;
@@ -36,13 +36,13 @@ $base-color: #3f84f6;
   }
   .mp-list {
     li {
-      padding: 0 .26rem .24rem .21rem;
+      //padding: 0 0 .24rem 0;
       background: #fff;
       border-radius: .04rem;
       //border: 1px solid #d2d2d2;
       margin-bottom: .24rem;
       .content-line {
-        padding-top: .24rem;
+        padding: .24rem .26rem 0 .21rem;
         font-size: .28rem;
         i {
           margin-right: .05rem;
@@ -55,6 +55,9 @@ $base-color: #3f84f6;
           text-align: right;
           width: 77%;
         }
+        .link {
+          color: $base-color;
+        }
         .fr {
           color: $base-color;
           border: 1px solid $base-color;
@@ -74,6 +77,49 @@ $base-color: #3f84f6;
           }
         }
       }
+      .btn-wrap {
+        border-top: 1px solid #d9d9d9;
+        margin-top: .32rem;
+        .inline-block {
+          width: 50%;
+          height: .8rem;
+          line-height: .8rem;
+          text-align: center;
+          font-size: .26rem;
+          color: #333;
+          i {
+            font-size: .3rem;
+            margin-right: .05rem;
+          }
+          &:first-child {
+            border-right: 1px solid #d9d9d9;
+          }
+        }
+      }
+    }
+    &.mp-list-record {
+      li {
+        padding: 0 .26rem .24rem .21rem;
+        .content-line {
+          padding: .24rem 0 0 0;
+          display: inline-block;
+          vertical-align: middle;
+          width: 62%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &:nth-child(even) {
+            width: 38%;
+          }
+          .content {
+            text-align: left;
+            width: auto;
+          }
+          .title {
+            width: auto;
+          }
+        }
+      }
     }
   }
   .add-account-modal {
@@ -187,8 +233,11 @@ $base-color: #3f84f6;
     }
     .filters-wrap {
       background: #fff;
-      text-align: center;
-      .date-wrap {
+      border-radius: .05rem;
+      padding: .24rem .21rem;
+      width: 7.1rem;
+      margin: 0 auto;
+      /*.date-wrap {
         label {
           width: 2.22rem;
           height: .5rem;
@@ -272,11 +321,17 @@ $base-color: #3f84f6;
             }
           }
         }
-      }
+      }*/
     }
     .record-list {
-      width: 6.9rem;
+      width: 7.1rem;
       margin: .24rem auto;
     }
   }
+  .mp-btn-wrap {
+    position: fixed;
+    bottom: 1.2rem;
+    left: 0;
+    right: 0;
+  }
 }

components/common/loading/Loading.vue

@@ -1,6 +1,9 @@
 <template lang="html">
   <div class="loading" v-show="loading" id="loading">
-    <img src="/images/all/loading.gif" alt="">
+    <!--<img src="/images/all/loading.gif" alt="">-->
+    <div class="wrap">
+      <div class="outer"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -19,6 +22,14 @@
   }
 </script>
 <style scoped>
+  @keyframes spin {
+    0%   { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+  }
+  .wrap { width: 64px; height: 64px; position: absolute;left: 50%;top:50%;margin-left:-32px;margin-top: -32px; }
+  .outer {
+    background-repeat: no-repeat;
+    background-size:100%; position: absolute; width: 100%; height: 100%; background-image: url('/images/mobile/loading.png'); animation: spin 800ms infinite linear; }
   .loading {
     position: fixed;
     top: 0;
@@ -29,6 +40,7 @@
     z-index: 1000;
     text-align: center;
   }
+
   .loading img {
     position: relative;
     top: 40%;

components/main/Header.vue

@@ -57,7 +57,7 @@
       position: fixed;
       width: 100%;
       background: #fff;
-      z-index: 1001;
+      z-index: 1002;
       top: 0;
       padding-top: 20px;
       -webkit-box-shadow: 0 2px 0 0 #ccc;

components/main/Nav.vue

@@ -1,8 +1,10 @@
 <template>
   <nav class="nav-list">
     <div class="container">
-      <nuxt-link to="/product/kind/home" class="item item-first">
-        <div>器件选型</div>
+      <nuxt-link to="/product/kind/home" class="item item-first" tag="div">
+        <div>器件选型
+          <kind-category v-if="$route.path != '/'" @loadchild="loadProductKinds" id="kindCategory"></kind-category>
+        </div>
       </nuxt-link>
       <nuxt-link :to="'/'" class="item" exact>
         <span>首&nbsp;&nbsp;页</span>
@@ -49,37 +51,15 @@
   </nav>
 </template>
 <script>
+  import { KindCategory } from '~components/home'
   export default {
     name: 'navView',
-    data () {
-      return {
-        isMounted: false
-      }
-    },
-    mounted () {
-      this.$nextTick(() => {
-        this.isMounted = true
-      })
-    },
-    computed: {
-      name () {
-        let path = this.$route.path
-        if (path === '/provider/factories') {
-          return '原厂专区'
-        } else if (path === '/provider/home') {
-          return '代理经销'
-        } else {
-          return '店  铺'
-        }
-      },
-      isActive () {
-        return (this.$route.path === '/provider/factories' && this.name === '原厂专区') || (this.$route.path === '/provider/home' && this.name === '代理经销')
-      }
+    components: {
+      KindCategory
     },
     methods: {
-      open (url) {
-        window.open(url)
-//        this.$router.push(url)
+      loadProductKinds (id) {
+        this.$store.dispatch('loadAllProductKinds', {id})
       },
       goB2B () {
         if (this.user.logged) {
@@ -88,6 +68,9 @@
           this.login(`${process.env.uasUrl}`)
         }
       }
+    },
+    created () {
+      this.$store.dispatch('loadProductKinds', { id: 0 })
     }
   }
 </script>
@@ -169,6 +152,15 @@
         }
       }
 
+      #kindCategory {
+        display: none;
+        font-weight: normal;
+        text-align: left;
+        z-index: 1001;
+        top: 40px;
+        left: 0;
+      }
+
       &.item-first {
         width: 220px;
         margin: 0;
@@ -178,6 +170,12 @@
         text-align: center;
         color: #fff;
         cursor: pointer;
+        position: relative;
+        &:hover {
+          #kindCategory {
+            display: block;
+          }
+        }
       }
     }
   }

components/mobile/MobileFooter.vue

@@ -74,6 +74,9 @@
         } else if (this.baseUtils.startWith(path, '/mobile/user')) {
           return 'user'
         } else if (this.baseUtils.startWith(path, '/mobile/center/user')) {
+          if (_tp === 'frompage') {
+            return 'user'
+          }
           return 'userCenter'
         } else if (this.baseUtils.startWith(path, '/mobile/order') && _tp === 'buyer') {
           return 'userCenter'

components/mobile/applyPurchase/SeekList.vue

@@ -60,7 +60,7 @@
                 <span>{{item.quotation.user ? item.quotation.user.userTel : '-'}}</span>
               </div>
               <div class="content">
-                交期：
+                交期(天)：
                 <span class="date">{{item.quotation.leadtime || '-'}}</span>
               </div>
               <table class="com-price-list">

components/mobile/base/BaseFilter.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="mobile-base-filter">
+    <span class="title inline-block">{{title}}：</span>
+    <div class="inline-block content">
+        <span class="item inline-block" v-for="item in selectItems" @click.stop="setSelect(item)">
+          <label class="mobile-cart-check" :class="{active: val === item.val}"></label>
+          {{item.key}}
+        </span>
+    </div>
+    <div class="date-wrap" v-if="selectOption === 'date' && val === 4">
+      <label>
+        <i class="iconfont icon-ico-date"></i>
+        <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
+        <p v-if="dateObj.fromDate">{{dateObj.fromDate | date}}</p>
+      </label>
+      <span>—</span>
+      <label>
+        <i class="iconfont icon-ico-date"></i>
+        <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
+        <p v-if="dateObj.toDate">{{dateObj.toDate | date}}</p>
+      </label>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+  </div>
+</template>
+<script>
+  import { RemindBox } from '~components/mobile/common'
+  export default {
+    props: {
+      // 筛选标题
+      title: {
+        type: String,
+        default: '标题'
+      },
+      // 筛选条件
+      selectItems: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      },
+      // 默认选择
+      defaultVal: {
+        default: 0
+      },
+      // 选择属性值
+      selectOption: {
+        type: String,
+        default: 'defaultKey'
+      }
+    },
+    data () {
+      return {
+        val: 0,
+        dateObj: {
+          fromDate: null,
+          toDate: null
+        },
+        remindText: '',
+        timeoutCount: ''
+      }
+    },
+    components: {
+      RemindBox
+    },
+    watch: {
+      val: {
+        handler: function (val) {
+          if (val) {
+            this.val = val
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      setRemindText: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      setSelect (item) {
+        this.val = item.val
+        if (this.selectOption === 'date' && item.val === 4) {
+          return
+        }
+        this.$emit('selectAction', {
+          key: this.selectOption,
+          value: this.selectOption === 'date' ? this.getDateObj(item.val) : item.val
+        })
+      },
+      /*
+      * 通过勾选获取时间
+      * @val: 0 => 全部
+      *       1 => 最近一个月
+      *       2 => 最近三个月
+      *       3 => 最近六个月
+      * */
+      getDateObj (val) {
+        let dateObj = null
+        // 当天0点时间戳
+        let currentTime = this.baseUtils.getClearDay(new Date())
+        if (val === 1) { // 一个月
+          dateObj = {
+            fromDate: currentTime - 30 * 24 * 60 * 60 * 1000,
+            toDate: currentTime
+          }
+        } else if (val === 2) { // 三个月
+          dateObj = {
+            fromDate: currentTime - 3 * 30 * 24 * 60 * 60 * 1000,
+            toDate: currentTime
+          }
+        } else if (val === 3) { // 六个月
+          dateObj = {
+            fromDate: currentTime - 6 * 30 * 24 * 60 * 60 * 1000,
+            toDate: currentTime
+          }
+        }
+        return dateObj
+      },
+      setDate (type) {
+        if (this.dateObj[type]) {
+          this.dateObj[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
+          if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate > this.dateObj.toDate) {
+            if (type === 'fromDate') {
+              this.setRemindText('起始时间不能大于结束时间')
+            } else {
+              this.setRemindText('结束时间不能小于起始时间')
+            }
+            this.dateObj[type] = null
+          } else {
+            if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate === this.dateObj.toDate) {
+              // 23:59:59
+              this.dateObj.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
+            }
+          }
+        } else {
+          this.dateObj[type] = null
+        }
+        this.$emit('selectAction', {
+          key: 'date',
+          value: this.dateObj
+        })
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  $base-color: #3f84f6;
+  .mobile-base-filter {
+    line-height: .5rem;
+    .title {
+      vertical-align: top;
+      width: 21%;
+    }
+    .content {
+      width: 79%;
+      .item {
+        width: 33%;
+        color: $base-color;
+      }
+    }
+    .date-wrap {
+      text-align: center;
+      label {
+        width: 2.6rem;
+        height: .5rem;
+        line-height: .5rem;
+        border-radius: .04rem;
+        border: 1px solid #bfbfbf;
+        background: url(/images/mobile/select-arrow.png) no-repeat;
+        background-size: .12rem .06rem;
+        vertical-align: middle;
+        background-color: #fff;
+        background-position: 2.1rem .2rem;
+        position: relative;
+        margin: .2rem 0 0 0;
+        input {
+          opacity: 0;
+          width: 2.22rem;
+          height: .5rem;
+          position: absolute;
+          left: 0;
+          z-index: 1;
+        }
+        i {
+          font-size: .28rem;
+          color: $base-color;
+          margin-left: .2rem;
+          float: left;
+        }
+      }
+      p {
+        font-weight: normal;
+        font-size: .22rem;
+        padding-right: .4rem;
+      }
+      span {
+        color: #a0a0a0;
+        margin: 0 .4rem;
+        vertical-align: bottom;
+        width: .5rem;
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+</style>

components/mobile/base/index.js

@@ -8,5 +8,6 @@ import AddressView from './addressView.vue'
 import AddressEdit from './addressEdit.vue'
 import RemindStr from './RemindStr.vue'
 import RemindOpeModal from './RemindOpeModal.vue'
+import BaseFilter from './BaseFilter.vue'
 
-export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper, SelectAddress, AddressView, AddressEdit, RemindStr, RemindOpeModal }
+export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper, SelectAddress, AddressView, AddressEdit, RemindStr, RemindOpeModal, BaseFilter }

pages/mobile/center/user/index.vue

@@ -38,7 +38,7 @@
             <img src="/images/mobile/center/user/cart.jpg" alt="">
             <p>购物车<span class="text" v-if="carCount > 0">{{carCount && carCount >= 99 ? 99 : carCount || 0}}</span></p>
           </nuxt-link>
-          <nuxt-link tag="li" to="/mobile/center/user/invoice" class="content-line">
+          <nuxt-link tag="li" to="/mobile/center/user/invoice/waitinvoice" class="content-line">
             <img src="/images/mobile/center/user/invoice_icon.png" alt="">
             <p>发票管理</p>
           </nuxt-link>

pages/mobile/center/user/invoice/index.vue

@@ -9,11 +9,6 @@
         </p>
       </div>
     </div>
-    <div class="order-nav">
-      <div class="active" @click="changeTab('')"><span>发票信息</span></div>
-      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待开票订单</span></nuxt-link>
-      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord" tag=div><span>开票记录</span></nuxt-link>
-    </div>
     <div class="invoice-wrapper-el">
       <div class="invoice-top clearfix">
         <div class="pull-left">已设置的发票信息</div>
@@ -273,8 +268,8 @@
     position: absolute;
     width: 100%;
     .invoice-wrapper-el {
-      margin: 2.08rem 0 0.98rem;
-      height: calc(100vh - 1.26rem - 0.98rem - 0.82rem);
+      margin: 1.26rem 0 0.98rem;
+      height: calc(100vh - 1.26rem - 0.98rem);
       overflow-y: scroll;
     }
     /*overflow-y: scroll;*/

pages/mobile/center/user/invoice/invoiceRecord.vue

@@ -1,133 +1,226 @@
 <template>
   <div class="mobile-invoice invoice-wrapper invoice-record" @click="showFilterInvoiceType = false">
     <div class="order-nav">
-      <nuxt-link to="/mobile/center/user/invoice" tag="div"><span>发票信息</span></nuxt-link>
-      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待开票订单</span></nuxt-link>
-      <div class="active"><span>开票记录</span></div>
+      <nuxt-link to="/mobile/center/user/invoice/waitinvoice" tag="div"><span>待申请</span></nuxt-link>
+      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=101" tag="div" :class="status === '101' ? 'active' :''"><span>待卖家开票</span></nuxt-link>
+      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=102" tag="div" :class="status === '102' ? 'active' :''"><span>已开票</span></nuxt-link>
+      <!--<div class="active"><span>已开票</span></div>-->
     </div>
     <div class="invoice-wrapper-el" id="invoice-wrapper-el">
       <div class="search-content mi-search-content">
-        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="订单号/发票抬头/收票人/联系电话">
+        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="卖家/物料名称/订单号/收票人/联系电话">
         <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
       </div>
       <div class="mi-list-content">
-        <div class="mi-lc-filters clearfix">
-          <span class="multi-check inline-block" :class="{active: filterParams.status === 101}" @click="setFilter('status', 101)">待开票</span>
-          <span class="multi-check inline-block" :class="{active: filterParams.status === 102}" @click="setFilter('status', 102)">已开票</span>
-          <div class="com-select-wrap fr" @click.stop="showFilterInvoiceType = !showFilterInvoiceType">{{filterParams.invoicetype === 1206 ? '普票' : filterParams.invoicetype === 1205 ? '专票' : '全部'}}
-            <ul class="select-list" v-show="showFilterInvoiceType">
-              <li @click.stop="setFilter('invoicetype', null)" v-show="filterParams.invoicetype">全部</li>
-              <li @click.stop="setFilter('invoicetype', 1206)" v-show="filterParams.invoicetype != 1206">普票</li>
-              <li @click.stop="setFilter('invoicetype', 1205)" v-show="filterParams.invoicetype != 1205">专票</li>
-            </ul>
-          </div>
-        </div>
+        <!--<div class="mi-lc-filters clearfix">-->
+          <!--<span class="multi-check inline-block" :class="{active: filterParams.status === 101}" @click="setFilter('status', 101)">待开票</span>-->
+          <!--<span class="multi-check inline-block" :class="{active: filterParams.status === 102}" @click="setFilter('status', 102)">已开票</span>-->
+          <!--<div class="com-select-wrap fr" @click.stop="showFilterInvoiceType = !showFilterInvoiceType">{{filterParams.invoicetype === 1206 ? '普票' : filterParams.invoicetype === 1205 ? '专票' : '全部'}}-->
+            <!--<ul class="select-list" v-show="showFilterInvoiceType">-->
+              <!--<li @click.stop="setFilter('invoicetype', null)" v-show="filterParams.invoicetype">全部</li>-->
+              <!--<li @click.stop="setFilter('invoicetype', 1206)" v-show="filterParams.invoicetype != 1206">普票</li>-->
+              <!--<li @click.stop="setFilter('invoicetype', 1205)" v-show="filterParams.invoicetype != 1205">专票</li>-->
+            <!--</ul>-->
+          <!--</div>-->
+        <!--</div>-->
         <ul class="mi-list" v-if="invoiceList.length">
           <li v-for="inv in invoiceList">
-            <div class="line">
-            <span class="inline-block title">
-              类型：
-            </span>
-              <span class="inline-block content">
-              <i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>
-            </span>
+            <div class="mi-list-top clearfix">
+              <div class="pull-left">{{inv.createTime | date}}</div>
+              <div class="pull-right" style="margin-right: 0.8rem;">{{inv.status == 101 ? '待开票' : '已开票'}}</div>
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              申请时间：
-            </span>
-              <span class="inline-block content">{{inv.createTime | date}}</span>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              状态：
-            </span>
-              <span class="inline-block content">{{inv.status == 101 ? '待开票' : '已开票'}}</span>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              商家名称：
-            </span>
-              <nuxt-link :to="`/mobile/shop/${inv.storeid}`" class="inline-block content link">{{inv.sellername}}</nuxt-link>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              订单号：
-            </span>
-              <span class="inline-block content">
-              <nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">
-                {{id}}
-              </nuxt-link>
-            </span>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              可开票金额：
-            </span>
-              <span class="inline-block content price">¥{{inv.price || 0}}</span>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              发票抬头：
-            </span>
-              <span class="inline-block content">{{inv.invoicetitle}}</span>
-            </div>
-            <template v-if="inv.invoicetype == 1205">
-              <div class="line">
-            <span class="inline-block title">
-              单位地址：
-            </span>
-                <span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>
+            <div class="mi-list-bottom">
+              <div class="list clearfix">
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">发票抬头：</div>
+                  <div class="pull-left overhidden" style="width: 1.85rem">{{inv.invoicetitle}}</div>
+                </div>
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">金额：</div>
+                  <div class="pull-left overhidden" style="width: 2.4rem">¥{{inv.price || 0}}</div>
+                </div>
               </div>
-              <div class="line">
-            <span class="inline-block title">
-              单位电话：
-            </span>
-                <span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>
+
+              <div class="list clearfix">
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">收票人：</div>
+                  <div class="pull-left overhidden" style="width:2.1rem">{{inv.receiverName}}</div>
+                </div>
+                <div class="clearfix pull-left w50">
+                  <div class="pull-left">电话：</div>
+                  <div class="pull-left overhidden">{{inv.recTel}}</div>
+                </div>
               </div>
-              <div class="line">
-            <span class="inline-block title">
-              税务登记号：
-            </span>
-                <span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>
+
+              <div class="list" v-if="inv.invoicetype === 1205">
+                <div class="clearfix">
+                  <div class="pull-left">单位电话：</div>
+                  <div class="pull-left overhidden" style="width: 4.6rem;">
+                    {{inv.billInfo.companyPhone || '-'}}
+                  </div>
+                </div>
               </div>
-              <div class="line">
-            <span class="inline-block title">
-              开户银行：
-            </span>
-                <span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>
+
+              <div class="list" v-if="inv.invoicetype === 1205">
+                <div class="clearfix">
+                  <div class="pull-left">开户银行名称：</div>
+                  <div class="pull-left overhidden" style="width: 4.6rem;">
+                    {{inv.billInfo.bankName || '-'}}
+                  </div>
+                </div>
               </div>
-              <div class="line">
-            <span class="inline-block title">
-              开户银行账户：
-            </span>
-                <span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>
+
+              <div class="list" v-if="inv.invoicetype === 1205">
+                <div class="clearfix">
+                  <div class="pull-left">开户银行账户：</div>
+                  <div class="pull-left overhidden" style="width: 4.6rem;">
+                    {{inv.billInfo.bankAccount || '-'}}
+                  </div>
+                </div>
               </div>
-            </template>
-            <div class="line">
-            <span class="inline-block title">
-              收票人：
-            </span>
-              <span class="inline-block content">{{inv.receiverName}}</span>
-            </div>
-            <div class="line">
-            <span class="inline-block title">
-              联系电话：
-            </span>
-              <span class="inline-block content">{{inv.recTel}}</span>
+
+              <div class="list" v-if="inv.invoicetype === 1205">
+                <div class="clearfix">
+                  <div class="pull-left">税务登记号：</div>
+                  <div class="pull-left overhidden" style="width: 4.8rem;">
+                    {{inv.billInfo.companyTaxNumber || '-'}}
+                  </div>
+                </div>
+              </div>
+
+              <div class="list ">
+                <div class="clearfix">
+                  <div class="pull-left">收票地址：</div>
+                  <div class="pull-left" style="width: 5rem;">
+                    {{inv.invoiceAddress}}
+                  </div>
+                </div>
+              </div>
+
+              <div class="list ">
+                <div class="clearfix">
+                  <div class="pull-left">订单号：</div>
+                  <div class="pull-left">
+                    <nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">
+                      {{id}}
+                    </nuxt-link>
+                  </div>
+                </div>
+              </div>
+
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              收票地址：
-            </span>
-              <span class="inline-block content">{{inv.invoiceAddress}}</span>
+            <div class="fixedImg">
+              <img src="/images/mobile/center/invoice-spec2.png" v-if="inv.invoicetype === 1206"/>
+              <img src="/images/mobile/center/invoice-nor2.png" v-else/>
             </div>
           </li>
         </ul>
-        <empty-status
-          :text="'暂无开票信息'"
-          :showLink="false"
-          v-else></empty-status>
+        <!--<ul class="mi-list" v-if="invoiceList.length">-->
+          <!--<li v-for="inv in invoiceList">-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--类型：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">-->
+              <!--<i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>-->
+            <!--</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--申请时间：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.createTime | date}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--状态：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.status == 101 ? '待开票' : '已开票'}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--商家名称：-->
+            <!--</span>-->
+              <!--<nuxt-link :to="`/mobile/shop/${inv.storeid}`" class="inline-block content link">{{inv.sellername}}</nuxt-link>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--订单号：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">-->
+              <!--<nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">-->
+                <!--{{id}}-->
+              <!--</nuxt-link>-->
+            <!--</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--可开票金额：-->
+            <!--</span>-->
+              <!--<span class="inline-block content price">¥{{inv.price || 0}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--发票抬头：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.invoicetitle}}</span>-->
+            <!--</div>-->
+            <!--<template v-if="inv.invoicetype == 1205">-->
+              <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--单位地址：-->
+            <!--</span>-->
+                <!--<span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>-->
+              <!--</div>-->
+              <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--单位电话：-->
+            <!--</span>-->
+                <!--<span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>-->
+              <!--</div>-->
+              <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--税务登记号：-->
+            <!--</span>-->
+                <!--<span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>-->
+              <!--</div>-->
+              <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--开户银行：-->
+            <!--</span>-->
+                <!--<span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>-->
+              <!--</div>-->
+              <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--开户银行账户：-->
+            <!--</span>-->
+                <!--<span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>-->
+              <!--</div>-->
+            <!--</template>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--收票人：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.receiverName}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--联系电话：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.recTel}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--收票地址：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.invoiceAddress}}</span>-->
+            <!--</div>-->
+          <!--</li>-->
+        <!--</ul>-->
+          <empty-status
+            :text="'暂无开票信息'"
+            :showLink="false"
+            v-else></empty-status>
       </div>
     </div>
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
@@ -151,7 +244,7 @@
           invoicetype: '',
           keyword: '',
           // 101为待开票， 102为已开票
-          status: null
+          status: 101
         },
         showFilterInvoiceType: false
       }
@@ -161,11 +254,23 @@
       PullUp,
       EmptyStatus
     },
-    fetch ({store}) {
+    fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('invoice/getInvoices', {count: 10, page: 1, role: 'BUYER', sorting: {'createTime': 'DESC'}})
+        store.dispatch('invoice/getInvoices', {count: 10, page: 1, role: 'BUYER', sorting: {'createTime': 'DESC'}, status: route.query.status})
       ])
     },
+    asyncData({route}) {
+      let filterParams = {
+        invoicetype: '',
+        keyword: '',
+        // 101为待开票， 102为已开票
+        status: 101
+      }
+      filterParams.status = route.query.status
+      return {
+        filterParams: filterParams
+      }
+    },
     watch: {
       '$store.state.invoice.data.invoices.data': {
         handler: function (val) {
@@ -182,9 +287,21 @@
           }
         },
         immediate: true
+      },
+      '$route.query.status': {
+        handler: function (val) {
+          this.filterParams.keyword = ''
+          this.filterParams.status = val
+          this.page = 0
+          this.isChange = true
+          this.onPullUp()
+        }
       }
     },
     computed: {
+      status() {
+        return this.$route.query.status
+      },
       invoices () {
         return this.$store.state.invoice.data.invoices
       },
@@ -241,6 +358,15 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/mobileInvoice';
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
   .invoice-record {
     .mi-list {
       padding-bottom: .68rem !important;
@@ -270,7 +396,7 @@
     }
   }
   .invoice-wrapper {
-    background: #fff;
+    background: #f1f3f6;
     /*margin: 1.26rem 0 0 0;*/
     left: 0;
     bottom: .98rem;
@@ -283,9 +409,48 @@
     width: 100%;
     .invoice-wrapper-el {
       /*margin: 0 0 0.98rem;*/
-      height: calc(100vh - 1.26rem - 0.98rem);
+      height: calc(100vh - 1.26rem - 0.98rem - 0.82rem);
       overflow-y: scroll;
       /*padding-bottom: 0.98rem;*/
     }
   }
+  .mobile-invoice.invoice-record .mi-list {
+    li {
+      background: #fff;
+      border-radius: 0.05rem;
+      border: 1px solid #e3e5e8;
+      margin: 0 0.2rem 0.3rem;
+      padding: 0 0.24rem;
+      position: relative;
+      .fixedImg {
+        position: absolute;
+        right: 0;
+        top: 0;
+        img {
+          width: 0.82rem;
+          height: 0.82rem;
+        }
+      }
+      .mi-list-top {
+        @include lineHeight(0.55rem);
+        font-size: 0.28rem;
+        color: #333;
+        border-bottom: 1px solid #d3d3d3;
+      }
+      .mi-list-bottom {
+        font-size: 0.28rem;
+        color: #333;
+        padding: 0.2rem 0;
+        .list {
+          line-height: 0.55rem;
+        }
+        .overhidden {
+          @include overFlowHidden()
+        }
+        .w50 {
+          width: 50%;
+        }
+      }
+    }
+  }
 </style>

pages/mobile/center/user/invoice/waitinvoice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="invoice-wrapper">
+  <div class="invoice-wrapper mobile-invoice">
     <div class="mobile-nav">
       <div class="mobile-header mobile-center-header">
         <a @click="goLastPage()"><i class="iconfont icon-fanhui"></i></a>
@@ -10,13 +10,18 @@
       </div>
     </div>
     <div class="order-nav">
-      <nuxt-link to="/mobile/center/user/invoice" tag="div"><span>发票信息</span></nuxt-link>
-      <div class="active"><span>待开票订单</span></div>
-      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord" tag=div><span>开票记录</span></nuxt-link>
+      <div class="active"><span>待申请</span></div>
+      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=101" tag="div"><span>待卖家开票</span></nuxt-link>
+      <!--<div class="active"><span>待开票订单</span></div>-->
+      <nuxt-link to="/mobile/center/user/invoice/invoiceRecord?status=102" tag=div><span>已开票</span></nuxt-link>
     </div>
     <div class="invoice-wrapper-el" id="invoicewrapperel">
-      <div class="mobile-invoice">
-        <div class="mi-remind-area" :class="{less: !showMoreRemind}">
+      <div class="search-content mi-search-content">
+        <input type="text" placeholder="商家名称/订单号" v-model="keyword">
+        <span @click="searchMore()"><i class="iconfont icon-sousuo"></i></span>
+      </div>
+      <div class="mobile-invoice" >
+        <div class="mi-remind-area" :class="{less: !showMoreRemind}" style="margin-bottom: 0.15rem;">
           <p class="title">温馨提示</p>
           <p class="content">
             <span class="inline-block">1、</span>
@@ -39,39 +44,43 @@
             <i v-show="!showMoreRemind" class="iconfont icon-xiashuangjiantou"></i>
           </p>
         </div>
-        <div class="search-content mi-search-content">
-          <input type="text" placeholder="商家名称/订单号" v-model="keyword">
-          <span @click="searchMore()"><i class="iconfont icon-sousuo"></i></span>
-        </div>
         <div class="mi-list-content">
           <ul class="mi-list" v-if="invoiceList.length > 0">
             <li v-for="inv in invoiceList" @click.stop="setActive(inv)" :class="{active: inv.$active}">
               <div class="line">
-                <span class="inline-block title">
+                <span class="inline-block">
                    <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
                      <!--<input type="checkbox">-->
                    </label>
-                  商家名称：
+                  <!--商家名称：-->
                 </span>
-                <span class="inline-block content" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>
+                <span class="inline-block content" style="text-align: left;margin-left:0.1rem;color: #333;">{{getTime(inv.paytime)}}</span>
+                <!--<span class="inline-block content" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>-->
               </div>
-              <div class="line">
-                <span class="inline-block title">
-                  订单号：
-                </span>
-                <span class="inline-block content" @click.stop="lookOrderDetail(inv)">
-                {{inv.orderid}}
-                </span>
-              </div>
-              <div class="line">
-                <span class="inline-block title">
-                  可开票金额：
-                </span>
-                <span class="inline-block content pri">¥{{inv.price}}</span>
+              <div class="line clearfix">
+                <div class="pull-left =" style="width: 65%">
+                  <span class="inline-block">卖家：</span>
+                  <span class="inline-block overhiden" style="width: 3.2rem" @click.stop="toShopdetails(inv)">{{inv.sellername}}</span>
+                </div>
+                <div class="pull-left" style="width: 35%">
+                  <span class="inline-block">
+                    金额：
+                  </span>
+                  <span class="inline-block pri overhiden"  style="width: 1.3rem">¥{{inv.price}}</span>
+                </div>
+                <div style="clear:both"></div>
+                <div style="margin-top: 0.26rem">
+                  <span class="inline-block">
+                   订单号：
+                  </span>
+                    <span class="inline-block content" @click.stop="lookOrderDetail(inv)" style="text-align: left">
+                  {{inv.orderid}}
+                  </span>
+                </div>
               </div>
             </li>
           </ul>
-          <div class="com-none-state" v-if="invoiceList.length === 0">
+          <div class="com-none-state" v-if="invoiceList.length === 0" style="background:rgba(0,0,0,0)">
             <img src="/images/mobile/@2x/empty-collect.png">
             <p>抱歉，暂无发票消息</p>
           </div>
@@ -305,6 +314,9 @@
       }
     },
     methods: {
+      getTime(Time) {
+        return this.baseUtils.formatDate(new Date(Time), 'yyyy-MM-dd hh:mm:ss')
+      },
       setActive (inv) {
         if (inv) {
           inv.$active = !inv.$active
@@ -539,7 +551,7 @@
       }
     }
     .mi-remind-area {
-      margin-top: 0.24rem;
+      /*margin-top: 0.24rem;*/
       background: #fff;
     }
     .mi-list-content .mi-list li {
@@ -548,10 +560,6 @@
         margin-top: 0;
       }
     }
-    .mi-search-content input {
-      width: 7rem;
-      margin: 0;
-    }
     .mobile-invoice .mi-list-content .mi-list li .line .content {
       padding: 0;
       color: #3976f4;
@@ -561,7 +569,7 @@
       }
     }
     .mobile-invoice .mi-list-content .mi-list li .line .title {
-      width: 33%;
+      width: auto
     }
     .applyinvoice_Alert {
       background: #fff;

pages/mobile/center/user/payCenter.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="mobile-pay-center mobile-fix-content mobile-centerfix-content" id="mobileFixContent" @click="setShowSelect('all', false)">
+  <div class="mobile-pay-center mobile-fix-content mobile-centerfix-content" :style="switchType === 'account' ? 'padding-bottom: 1rem;' : ''" id="mobileFixContent" @click="setShowSelect('all', false)">
     <div class="mp-head">
       <span class="inline-block" :class="{'active': switchType === 'record'}" @click="setSwitchType('record')">交易记录</span>
       <span class="inline-block" :class="{'active': switchType === 'account'}" @click="setSwitchType('account')">付款账户</span>
     </div>
     <div class="mp-content" v-if="switchType == 'account'">
-      <p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>
+      <!--<p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>-->
       <ul class="mp-list">
         <li v-for="account in accountList">
           <div class="content-line">
@@ -24,21 +24,29 @@
             <span class="inline-block title">开户名称：</span>
             <span class="inline-block content text-ellipse">{{account.accountname}}</span>
           </div>
-          <div class="content-line clearfix">
+         <!-- <div class="content-line clearfix">
             <span class="inline-block title">操作：</span>
             <a class="fr inline-block default-icon" v-if="account.num == 1">默认账户</a>
             <a class="fr inline-block set-default-icon" v-if="account.num != 1" @click="setDefaultAccount(account)">设为默认</a>
             <a class="fr inline-block" @click="deleteAccount(account)">删除</a>
+          </div>-->
+          <div class="btn-wrap">
+            <a class="inline-block default-icon" v-if="account.num == 1"><i class="iconfont icon-gouxuan1"></i>默认账户</a>
+            <a class="inline-block set-default-icon" v-if="account.num != 1" @click="setDefaultAccount(account)"><i class="iconfont icon-gouxuan1"></i>设为默认</a>
+            <a class="inline-block" @click="deleteAccount(account)"><i class="iconfont icon-lajitong"></i>删除</a>
           </div>
         </li>
       </ul>
+      <div class="com-btn-wrap mp-btn-wrap">
+        <button @click.stop="openAddAccount"><i class="iconfont icon-add"></i>新增账户</button>
+      </div>
     </div>
     <div class="mp-record" v-if="switchType == 'record'">
       <div class="search-content">
         <input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">
         <span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>
       </div>
-      <div class="filters-wrap">
+      <!--<div class="filters-wrap">
         <div class="date-wrap">
           <label>
             <i class="iconfont icon-ico-date"></i>
@@ -77,36 +85,46 @@
             </ul>
           </li>
         </ul>
+      </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>
-      <ul class="mp-list record-list">
+      <ul class="mp-list record-list mp-list-record">
         <li v-for="record in recordList">
-          <div class="content-line">
-            <span class="inline-block title">时间：</span>
-            <span class="inline-block content text-ellipse">{{record.paytime | time}}</span>
-          </div>
           <div class="content-line">
             <span class="inline-block title">订单号：</span>
-            <span class="inline-block content text-ellipse">{{record.orderid}}</span>
+            <nuxt-link :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(record.orderid)}&type=buyer`" class="inline-block content link">{{record.orderid}}</nuxt-link>
           </div>
           <div class="content-line">
-            <span class="inline-block title">卖家名称：</span>
-            <span class="inline-block content text-ellipse">{{record.sellername}}</span>
+            <span class="inline-block title">金额：</span>
+            <span class="inline-block content">{{record.currencyName | currencyFilter}}{{record.ensurePrice}}</span>
           </div>
           <div class="content-line">
-            <span class="inline-block title">币种：</span>
-            <span class="inline-block content text-ellipse">{{record.currencyName}}</span>
+            <span class="inline-block title">卖家：</span>
+            <span class="inline-block content">{{record.sellername}}</span>
           </div>
+          <!--<div class="content-line">
+            <span class="inline-block title">交易方式：</span>
+            <span class="inline-block content text-ellipse">{{record.paytype == 1103 ? '线下支付' : '线上支付'}}</span>
+          </div>-->
           <div class="content-line">
-            <span class="inline-block title">金额：</span>
-            <span class="inline-block content text-ellipse"><i class="fa fa-minus" style="color: #1da902;"></i>{{record.ensurePrice}}</span>
+            <span class="inline-block title">收款方式：</span>
+            <span class="inline-block content">卖家收款</span>
           </div>
           <div class="content-line">
-            <span class="inline-block title">交易方式：</span>
-            <span class="inline-block content text-ellipse">{{record.paytype == 1103 ? '线下支付' : '线上支付'}}</span>
+            <span class="inline-block title">时间：</span>
+            <span class="inline-block content">{{record.paytime | time}}</span>
           </div>
           <div class="content-line">
             <span class="inline-block title">状态：</span>
-            <span class="inline-block content text-ellipse">支付成功</span>
+            <span class="inline-block content">支付成功</span>
           </div>
         </li>
       </ul>
@@ -153,7 +171,7 @@
 </template>
 <script>
   import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
-  import { ModalWrapper } from '~components/mobile/base'
+  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -197,14 +215,79 @@
         dateObj: {
           fromDate: '',
           toDate: ''
-        }
+        },
+        filterOptions: [
+//          {
+//            title: '交易方式',
+//            selectOption: 'method',
+//            selectItems: [{key: '全部',
+//              val: 0
+//            }, {
+//              key: '卖家收款',
+//              val: 1
+//            }, {
+//              key: '平台代收',
+//              val: 2
+//            }],
+//            defaultVal: 0
+//          },
+          {
+            title: '交易币种',
+            selectOption: 'currencyName',
+            selectItems: [{key: '全部',
+              val: 0
+            }, {
+              key: 'RMB',
+              val: 'RMB'
+            }, {
+              key: 'USD',
+              val: 'USD'
+            }],
+            defaultVal: 0
+          },
+//          {
+//            title: '交易状态',
+//            selectOption: 'status',
+//            selectItems: [{key: '全部',
+//              val: 0
+//            }, {
+//              key: '已付款',
+//              val: 1
+//            }, {
+//              key: '待付款',
+//              val: 2
+//            }],
+//            defaultVal: 0
+//          },
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{key: '全部',
+              val: 0
+            }, {
+              key: '一个月',
+              val: 1
+            }, {
+              key: '三个月',
+              val: 2
+            }, {
+              key: '六个月',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 0
+          }
+        ]
       }
     },
     components: {
       RemindBox,
       PullUp,
       ModalWrapper,
-      EmptyStatus
+      EmptyStatus,
+      BaseFilter
     },
     fetch ({store}) {
       return Promise.all([
@@ -335,17 +418,31 @@
         }
       },
       setSelect (type, val) {
-        if (type === 'method') {
-          this.filterParams.method = val
-          this.setShowSelect('method', false)
-        } else if (type === 'currencyName') {
-          this.filterParams.currencyName = val
-          this.setShowSelect('currencyName', false)
-        } else if (type === 'status') {
-          this.filterParams.status = val
-          this.setShowSelect('status', false)
+//        if (type === 'method') {
+//          this.filterParams.method = val
+//          this.setShowSelect('method', false)
+//        } else if (type === 'currencyName') {
+//          this.filterParams.currencyName = val
+//          this.setShowSelect('currencyName', false)
+//        } else if (type === 'status') {
+//          this.filterParams.status = val
+//          this.setShowSelect('status', false)
+//        }
+        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(this.filterParams.currencyName)
+        this.filterRecord()
+      },
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
       },
       setDate (type) {
         if (this.dateObj[type]) {

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

@@ -1,11 +1,20 @@
 <template>
-  <div class="mobile-invoice mobile-content mobile-content-long vendor-invoice" :class="{'invoice-record': switchType == 'record'}" @click="showFilterInvoiceType = false">
-    <div class="switch-head">
-      <div class="com-switch-head" style="line-height: 0.78rem">
-        <span class="com-switch-item inline-block" :class="{active: switchType == 'apply'}" @click="setSwitchType('apply')">买家开票申请</span>
-        <span class="com-switch-item inline-block" :class="{active: switchType == 'record'}" @click="setSwitchType('record')">开票记录</span>
+  <div class="mobile-invoice mobile-content mobile-content-long vendor-invoice" style="background: #f1f3f6" :class="{'invoice-record': switchType == 'record'}" @click="showFilterInvoiceType = false">
+    <div class="switch-head" style="border:0">
+      <div class="com-switch-head clearfix" style="line-height: 0.78rem">
+       <div style="width: 50%" class="pull-left">
+         <span style="margin: 0" class="com-switch-item inline-block" :class="{active: switchType == 'apply'}" @click="setSwitchType('apply')">待开票</span>
+       </div>
+        <div style="width: 50%" class="pull-left">
+          <span class="com-switch-item inline-block" :class="{active: switchType == 'record'}" @click="setSwitchType('record')">已开票</span>
+        </div>
+
       </div>
     </div>
+    <div class="search-content mi-search-content">
+      <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="订单号/发票抬头/收票人/联系电话">
+      <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
+    </div>
     <div class="mi-remind-area" :class="{less: !showMoreRemind}" v-if="switchType == 'apply'">
       <p class="title">温馨提示</p>
       <p class="content">
@@ -25,113 +34,209 @@
         <i v-show="!showMoreRemind" class="iconfont icon-xiashuangjiantou"></i>
       </p>
     </div>
-    <div class="search-content mi-search-content">
-      <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="订单号/发票抬头/收票人/联系电话">
-      <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
-    </div>
-    <div class="mi-list-content">
-      <div class="mi-lc-filters clearfix">
-        <div class="com-select-wrap fr" @click.stop="showFilterInvoiceType = !showFilterInvoiceType">{{filterParams.invoicetype === 1206 ? '普票' : filterParams.invoicetype === 1205 ? '专票' : '全部'}}
-          <ul class="select-list" v-show="showFilterInvoiceType">
-            <li @click.stop="setInvoiceType(null)" v-if="filterParams.invoicetype">全部</li>
-            <li @click.stop="setInvoiceType(1206)" v-if="filterParams.invoicetype != 1206">普票</li>
-            <li @click.stop="setInvoiceType(1205)" v-if="filterParams.invoicetype != 1205">专票</li>
-          </ul>
-        </div>
-      </div>
+    <div class="mi-list-content" style="background: #f1f3f6;" :style="switchType == 'apply' ? 'padding-top: 0.21rem' : ''">
+      <!--<div class="mi-lc-filters clearfix">-->
+        <!--<div class="com-select-wrap fr" @click.stop="showFilterInvoiceType = !showFilterInvoiceType">{{filterParams.invoicetype === 1206 ? '普票' : filterParams.invoicetype === 1205 ? '专票' : '全部'}}-->
+          <!--<ul class="select-list" v-show="showFilterInvoiceType">-->
+            <!--<li @click.stop="setInvoiceType(null)" v-if="filterParams.invoicetype">全部</li>-->
+            <!--<li @click.stop="setInvoiceType(1206)" v-if="filterParams.invoicetype != 1206">普票</li>-->
+            <!--<li @click.stop="setInvoiceType(1205)" v-if="filterParams.invoicetype != 1205">专票</li>-->
+          <!--</ul>-->
+        <!--</div>-->
+      <!--</div>-->
       <ul class="mi-list" v-if="invoiceList.length">
         <li v-for="inv in invoiceList" @click="setActive(inv)" :class="{active: inv.$active && switchType == 'apply'}">
-          <div class="line">
+          <div class="mi-list-top clearfix">
             <span class="inline-block title">
-               <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
-                 <!--<input type="checkbox">-->
-               </label>
-              类型：
+              <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
+              <!--<input type="checkbox">-->
+              </label>
+              {{inv.createTime | date}}
             </span>
-            <span class="inline-block content">
-              <i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>
+            <span class="inline-block content pull-right" style="margin-right: 0.8rem;">{{inv.status == 101 ? '待开票' : '已开票'}}
             </span>
+            <!--<div class="pull-left"></div>-->
+            <!--<div class="pull-right" style="margin-right: 0.8rem;">{{inv.status == 101 ? '待开票' : '已开票'}}</div>-->
           </div>
-          <div class="line">
-            <span class="inline-block title">
-              申请时间：
-            </span>
-            <span class="inline-block content">{{inv.createTime | date}}</span>
-          </div>
-          <div class="line">
-            <span class="inline-block title">
-              订单号：
-            </span>
-            <span class="inline-block content">
-              <span @click.stop="goOrderDetail(inv, index)" class="block link" :key="id" v-for="(id, index) in inv.orderids.split(',')">
-                {{id}}
-              </span>
-            </span>
-          </div>
-          <div class="line">
-            <span class="inline-block title">
-              可开票金额：
-            </span>
-            <span class="inline-block content price">¥{{inv.price || 0}}</span>
-          </div>
-          <div class="line">
-            <span class="inline-block title">
-              发票抬头：
-            </span>
-            <span class="inline-block content">{{inv.invoicetitle}}</span>
-          </div>
-          <template v-if="inv.invoicetype == 1205">
-            <div class="line">
-            <span class="inline-block title">
-              单位地址：
-            </span>
-              <span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>
+          <div class="mi-list-bottom">
+            <div class="list clearfix">
+              <div class="clearfix pull-left w50">
+                <div class="pull-left">发票抬头：</div>
+                <div class="pull-left overhidden" style="width: 1.85rem">{{inv.invoicetitle}}</div>
+              </div>
+              <div class="clearfix pull-left w50">
+                <div class="pull-left">金额：</div>
+                <div class="pull-left overhidden" style="width: 2.4rem">¥{{inv.price || 0}}</div>
+              </div>
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              单位电话：
-            </span>
-              <span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>
+
+            <div class="list clearfix">
+              <div class="clearfix pull-left w50">
+                <div class="pull-left">收票人：</div>
+                <div class="pull-left overhidden" style="width:2.1rem">{{inv.receiverName}}</div>
+              </div>
+              <div class="clearfix pull-left w50">
+                <div class="pull-left">电话：</div>
+                <div class="pull-left overhidden">{{inv.recTel}}</div>
+              </div>
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              税务登记号：
-            </span>
-              <span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>
+
+            <div class="list" v-if="inv.invoicetype === 1205">
+              <div class="clearfix">
+                <div class="pull-left">单位电话：</div>
+                <div class="pull-left overhidden" style="width: 4.6rem;">
+                  {{inv.billInfo.companyPhone || '-'}}
+                </div>
+              </div>
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              开户银行：
-            </span>
-              <span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>
+
+            <div class="list" v-if="inv.invoicetype === 1205">
+              <div class="clearfix">
+                <div class="pull-left">开户银行名称：</div>
+                <div class="pull-left overhidden" style="width: 4.6rem;">
+                  {{inv.billInfo.bankName || '-'}}
+                </div>
+              </div>
             </div>
-            <div class="line">
-            <span class="inline-block title">
-              开户银行账户：
-            </span>
-              <span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>
+
+            <div class="list" v-if="inv.invoicetype === 1205">
+              <div class="clearfix">
+                <div class="pull-left">开户银行账户：</div>
+                <div class="pull-left overhidden" style="width: 4.6rem;">
+                  {{inv.billInfo.bankAccount || '-'}}
+                </div>
+              </div>
             </div>
-          </template>
-          <div class="line">
-            <span class="inline-block title">
-              收票人：
-            </span>
-            <span class="inline-block content">{{inv.receiverName}}</span>
-          </div>
-          <div class="line">
-            <span class="inline-block title">
-              联系电话：
-            </span>
-            <span class="inline-block content">{{inv.recTel}}</span>
+
+            <div class="list" v-if="inv.invoicetype === 1205">
+              <div class="clearfix">
+                <div class="pull-left">税务登记号：</div>
+                <div class="pull-left overhidden" style="width: 4.8rem;">
+                  {{inv.billInfo.companyTaxNumber || '-'}}
+                </div>
+              </div>
+            </div>
+
+            <div class="list ">
+              <div class="clearfix">
+                <div class="pull-left">收票地址：</div>
+                <div class="pull-left" style="width: 5rem;">
+                  {{inv.invoiceAddress}}
+                </div>
+              </div>
+            </div>
+
+            <div class="list ">
+              <div class="clearfix">
+                <div class="pull-left">订单号：</div>
+                <div class="pull-left">
+                  <nuxt-link class="block link" :key="id" :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(id)}&type=buyer`" v-for="id in inv.orderids.split(',')">
+                    {{id}}
+                  </nuxt-link>
+                </div>
+              </div>
+            </div>
+
           </div>
-          <div class="line">
-            <span class="inline-block title">
-              收票地址：
-            </span>
-            <span class="inline-block content">{{inv.invoiceAddress}}</span>
+          <div class="fixedImg">
+            <img src="/images/mobile/center/invoice-spec2.png" v-if="inv.invoicetype === 1206"/>
+            <img src="/images/mobile/center/invoice-nor2.png" v-else/>
           </div>
         </li>
       </ul>
+      <!--<ul class="mi-list" v-if="invoiceList.length">-->
+        <!--<li v-for="inv in invoiceList" @click="setActive(inv)" :class="{active: inv.$active && switchType == 'apply'}">-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+               <!--<label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">-->
+                 <!--&lt;!&ndash;<input type="checkbox">&ndash;&gt;-->
+               <!--</label>-->
+              <!--类型：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">-->
+              <!--<i class="inv" :class="{'spec-inv' : inv.invoicetype === 1205}">{{inv.invoicetype === 1206 ? '普票' : '专票'}}</i>-->
+            <!--</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--申请时间：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">{{inv.createTime | date}}</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--订单号：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">-->
+              <!--<span @click.stop="goOrderDetail(inv, index)" class="block link" :key="id" v-for="(id, index) in inv.orderids.split(',')">-->
+                <!--{{id}}-->
+              <!--</span>-->
+            <!--</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--可开票金额：-->
+            <!--</span>-->
+            <!--<span class="inline-block content price">¥{{inv.price || 0}}</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--发票抬头：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">{{inv.invoicetitle}}</span>-->
+          <!--</div>-->
+          <!--<template v-if="inv.invoicetype == 1205">-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--单位地址：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.billInfo.companyAddress || '-'}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--单位电话：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.billInfo.companyPhone || '-'}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--税务登记号：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.billInfo.companyTaxNumber || '-'}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--开户银行：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.billInfo.bankName || '-'}}</span>-->
+            <!--</div>-->
+            <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--开户银行账户：-->
+            <!--</span>-->
+              <!--<span class="inline-block content">{{inv.billInfo.bankAccount || '-'}}</span>-->
+            <!--</div>-->
+          <!--</template>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--收票人：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">{{inv.receiverName}}</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--联系电话：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">{{inv.recTel}}</span>-->
+          <!--</div>-->
+          <!--<div class="line">-->
+            <!--<span class="inline-block title">-->
+              <!--收票地址：-->
+            <!--</span>-->
+            <!--<span class="inline-block content">{{inv.invoiceAddress}}</span>-->
+          <!--</div>-->
+        <!--</li>-->
+      <!--</ul>-->
       <empty-status
         :text="'暂无开票信息'"
         :showLink="false"
@@ -334,4 +439,58 @@
       }
     }
   }
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
+  .mobile-invoice.invoice-record .mi-list li  .title label {
+    display: none;
+  }
+  .mobile-invoice.vendor-invoice {
+    .mi-list {
+      padding: 0;
+      li {
+        background: #fff;
+        border-radius: 0.05rem;
+        border: 1px solid #e3e5e8;
+        margin: 0 0.2rem 0.3rem;
+        padding: 0 0.24rem;
+        position: relative;
+        .fixedImg {
+          position: absolute;
+          right: 0;
+          top: 0;
+          img {
+            width: 0.82rem;
+            height: 0.82rem;
+          }
+        }
+        .mi-list-top {
+          @include lineHeight(0.55rem);
+          font-size: 0.28rem;
+          color: #333;
+          border-bottom: 1px solid #d3d3d3;
+        }
+        .mi-list-bottom {
+          font-size: 0.28rem;
+          color: #333;
+          padding: 0.2rem 0;
+          .list {
+            line-height: 0.55rem;
+          }
+          .overhidden {
+            @include overFlowHidden()
+          }
+          .w50 {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
 </style>

pages/mobile/center/vendor/payCenter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-pay-center vendor-pay mobile-fix-content mobile-centerfix-content" :class="{'vendor-pay-record': switchType === 'record' && recordList.length}" id="mobileFixContent" @click="setShowSelect('all', false)">
+  <div class="mobile-pay-center vendor-pay mobile-fix-content mobile-centerfix-content" :class="{'vendor-pay-record': switchType === 'record' && recordList.length}" id="mobileFixContent">
     <div class="mp-head">
       <span class="inline-block" :class="{'active': switchType === 'record'}" @click="setSwitchType('record')">交易记录</span>
       <span class="inline-block" :class="{'active': switchType === 'account'}" @click="setSwitchType('account')">收款账户</span>
@@ -7,7 +7,7 @@
 
     <!-- 账户信息start -->
     <div class="mp-content" v-if="switchType == 'account'">
-      <p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>
+      <!--<p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>-->
       <ul class="mp-list">
         <li v-for="account in accountList">
           <div class="content-line">
@@ -33,13 +33,15 @@
               <i v-if="account.status == 101" class="iconfont icon-tixing"></i>
             </span>
           </div>
-          <div class="content-line clearfix">
-            <span class="inline-block title">操作：</span>
-            <a class="fr inline-block set-default-icon" @click="reuseAccount(account)" v-if="account.status == 105">重新使用</a>
-            <a class="fr inline-block" @click="deleteAccount(account)">删除</a>
+          <div class="btn-wrap clearfix">
+            <a class="inline-block" @click="reuseAccount(account)"><i class="iconfont icon-gouxuan1"></i>重新使用</a><!-- v-if="account.status == 105"-->
+            <a class="inline-block" @click="deleteAccount(account)"><i class="iconfont icon-lajitong"></i>删除</a>
           </div>
         </li>
       </ul>
+      <div class="com-btn-wrap mp-btn-wrap">
+        <button @click.stop="openAddAccount"><i class="iconfont icon-add"></i>新增账户</button>
+      </div>
     </div>
     <!-- 账户信息end -->
 
@@ -50,61 +52,36 @@
         <span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>
       </div>
       <div class="filters-wrap">
-        <div class="date-wrap">
-          <label>
-            <i class="iconfont icon-ico-date"></i>
-            <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
-            <p v-if="filterParams.fromDate">{{filterParams.fromDate | date}}</p>
-          </label>
-          <span>—</span>
-          <label>
-            <i class="iconfont icon-ico-date"></i>
-            <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
-            <p v-if="filterParams.toDate">{{filterParams.toDate | date}}</p>
-          </label>
-        </div>
-        <ul class="select-wrap clearfix">
-          <li class="inline-block fl">
-            <div @click.stop="setShowSelect('method', !showSelectMethod)">{{filterParams.method ? filterParams.method == 1103 ? '线下支付' : '线上支付' : '交易方式'}}</div>
-            <ul class="select-list" v-show="showSelectMethod">
-              <li @click.stop="setSelect('method', null)">交易方式</li>
-              <li @click.stop="setSelect('method', 1103)">线下支付</li>
-            </ul>
-          </li>
-          <li class="inline-block fr">
-            <div @click.stop="setShowSelect('status', !showSelectStatus)">{{filterParams.status || '状态'}}</div>
-            <ul class="select-list" v-show="showSelectStatus">
-              <li @click.stop="setSelect('status', null)">状态</li>
-              <li @click.stop="setSelect('status', '收款成功')">收款成功</li>
-            </ul>
-          </li>
-        </ul>
+        <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>
-      <ul class="mp-list record-list" v-if="recordList.length">
+      <ul class="mp-list record-list mp-list-record" v-if="recordList.length">
         <li v-for="record in recordList">
-          <div class="content-line">
-            <span class="inline-block title">时间：</span>
-            <span class="inline-block content text-ellipse">{{record.transferTime | time}}</span>
-          </div>
           <div class="content-line">
             <span class="inline-block title">订单号：</span>
-            <span class="inline-block content text-ellipse">{{record.orderid}}</span>
+            <nuxt-link :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(record.puid)}&type=saler`" class="inline-block content text-ellipse link">{{record.orderid}}</nuxt-link>
           </div>
           <div class="content-line">
-            <span class="inline-block title">买家名称：</span>
-            <span class="inline-block content text-ellipse">{{record.buyerentername || record.buyername}}</span>
+            <span class="inline-block title">金额：</span>
+            <span class="inline-block content text-ellipse">{{record.currencyName | currencyFilter}}{{record.total}}</span>
           </div>
           <div class="content-line">
-            <span class="inline-block title">币种：</span>
-            <span class="inline-block content text-ellipse">{{record.currencyName}}</span>
+            <span class="inline-block title">买家：</span>
+            <span class="inline-block content text-ellipse">{{record.buyerentername || record.buyername}}</span>
           </div>
           <div class="content-line">
-            <span class="inline-block title">金额：</span>
-            <span class="inline-block content text-ellipse"><i class="fa fa-plus" style="color: #f51c24;"></i>{{record.total}}</span>
+            <span class="inline-block title">付款方式：</span>
+            <span class="inline-block content text-ellipse">{{record.operateType === 1063 ? '买家付款' : '平台代收'}}</span>
           </div>
           <div class="content-line">
-            <span class="inline-block title">交易方式：</span>
-            <span class="inline-block content text-ellipse">线下付款</span>
+            <span class="inline-block title">时间：</span>
+            <span class="inline-block content text-ellipse">{{record.transferTime | time}}</span>
           </div>
           <div class="content-line">
             <span class="inline-block title">状态：</span>
@@ -112,14 +89,13 @@
           </div>
         </li>
       </ul>
-
+      <div class="fix-count-wrap" v-if="recordList.length">
+        <span class="content">已收总计：<span>{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}}</span></span>
+        <!--<span class="content">支出总计：<span>{{currencySymbol | currencyFilter}}&nbsp;0</span></span>
+        <p>结余：{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}} (共计{{recordList.length || 0}}笔交易)</p>-->
+      </div>
     </div>
     <!-- 交易记录end -->
-    <div class="fix-count-wrap" v-if="recordList.length">
-      <span class="content">收入总计：<span>{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}}</span></span>
-      <span class="content">支出总计：<span>{{currencySymbol | currencyFilter}}&nbsp;0</span></span>
-      <p>结余：{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}} (共计{{recordList.length || 0}}笔交易)</p>
-    </div>
     <!-- 新增账户弹框start -->
     <modal-wrapper :noHeader="true" :showModal="showModal" @closeAction="showModal = false">
       <div class="add-account-modal in-wrapper">
@@ -196,7 +172,7 @@
 </template>
 <script>
   import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
-  import { ModalWrapper } from '~components/mobile/base'
+  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -233,8 +209,6 @@
           method: '',
           status: ''
         },
-        showSelectMethod: false,
-        showSelectStatus: false,
         currentId: '',
         showReuseModal: false,
         totalRecordPrice: 0,
@@ -242,14 +216,65 @@
         dateObj: {
           fromDate: '',
           toDate: ''
-        }
+        },
+        filterOptions: [
+          {
+            title: '交易方式',
+            selectOption: 'method',
+            selectItems: [{key: '全部',
+              val: 0
+            }, {
+              key: '买家付款',
+              val: 1
+            }, {
+              key: '平台代收',
+              val: 2
+            }],
+            defaultVal: 0
+          },
+          {
+            title: '交易状态',
+            selectOption: 'status',
+            selectItems: [{key: '全部',
+              val: 0
+            }, {
+              key: '已收款',
+              val: 1
+            }, {
+              key: '待收款',
+              val: 2
+            }],
+            defaultVal: 0
+          },
+          {
+            title: '交易时间',
+            selectOption: 'date',
+            selectItems: [{key: '全部',
+              val: 0
+            }, {
+              key: '一个月',
+              val: 1
+            }, {
+              key: '三个月',
+              val: 2
+            }, {
+              key: '六个月',
+              val: 3
+            }, {
+              key: '自定义',
+              val: 4
+            }],
+            defaultVal: 0
+          }
+        ]
       }
     },
     components: {
       RemindBox,
       PullUp,
       ModalWrapper,
-      EmptyStatus
+      EmptyStatus,
+      BaseFilter
     },
     fetch ({store}) {
       return Promise.all([
@@ -386,25 +411,20 @@
         this.isChange = true
         this.reloadList()
       },
-      setShowSelect (type, flag) {
-        if (type === 'all') {
-          this.showSelectMethod = flag
-          this.showSelectStatus = flag
-        } else if (type === 'method') {
-          this.showSelectMethod = flag
-          this.showSelectStatus = false
-        } else if (type === 'status') {
-          this.showSelectStatus = flag
-          this.showSelectMethod = false
-        }
+      onSelectAction (selectObj) {
+        this.setSelect(selectObj.key, selectObj.value)
       },
       setSelect (type, val) {
-        if (type === 'method') {
-          this.filterParams.method = val
-          this.setShowSelect('method', false)
-        } else if (type === 'status') {
-          this.filterParams.status = val
-          this.setShowSelect('status', false)
+        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()
       },
@@ -432,8 +452,12 @@
         }
       },
       reuseAccount (account) {
-        this.currentId = account.id
-        this.showReuseModal = true
+        if (account.status !== 105) {
+          this.setRemindText(`该账户${this.$options.filters.bankStatusFilter(account.status)}`)
+        } else {
+          this.currentId = account.id
+          this.showReuseModal = true
+        }
       },
       setDefaultAccount () {
         this.$http.get(`/trade/bankInfo/setDefaultAccount/${this.currentId}`).then(() => {
@@ -685,7 +709,7 @@
     background: #fff;
     border-radius: .02rem;
     border-top: 1px solid #bfbfbf;
-    line-height: .63rem;
+    line-height: 1.25rem;
     font-size: .28rem;
     width: 100%;
     padding-right: .3rem;
@@ -723,6 +747,7 @@
     }
   }
   .vendor-pay {
+    padding-bottom: 1rem;
     .mobile-modal .mobile-modal-wrapper {
       left: .2rem !important;
       right: .2rem !important;
@@ -730,6 +755,6 @@
   }
   .vendor-pay-record {
     /*bottom: 2.23rem !important;*/
-    padding-bottom: 1.25rem;
+    padding-bottom: 1.25rem !important;
   }
 </style>

pages/mobile/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mobile-center">
     <div class="com-mobile-header">
       <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
       <p>账户中心
@@ -21,33 +21,100 @@
         <div class="img-wrap">
           <img src="/images/mobile/user/icon_01.png" alt="">
         </div>
-       <!-- <span>公司</span>-->
+        <!-- <span>公司</span>-->
         <i class="iconfont icon-xiangyou"></i>
         <span class="l-right inline-block">{{currentEnName}}</span>
       </div>
-      <!--v-if="storeStatus.uuid"-->
-      <div class="line" @click="go('/mobile/user/storeinfo')" v-if="storeStatus.uuid">
-        <div class="img-wrap">
-          <img src="/images/mobile/user/icon_02.png" alt="">
-        </div>
-        <span>店铺信息</span>
-        <i class="iconfont icon-xiangyou"></i>
+
+
+      <div class="block-wrap seek-operation">
+        <p><i></i>更多信息</p>
+        <ul>
+          <li @click="go('/mobile/user/storeinfo')" v-if="storeStatus.uuid">
+            <img src="/images/mobile/user/icon_02.png" alt="">
+            <p>店铺信息</p>
+          </li>
+          <li @click="go('/mobile/user/storeinfo')" v-else>
+            <img src="/images/mobile/user/apply-store.png" alt="">
+            <p>开店申请</p>
+          </li>
+          <li @click="go('/mobile/center/user/invoice?type=frompage')">
+            <img src="/images/mobile/user/fapiao.png" alt="">
+            <p>发票信息</p>
+          </li>
+          <li @click="go('/')">
+            <img src="/images/mobile/user/shoukuan.png" alt="">
+            <p>收款账户</p>
+          </li>
+          <li @click="go('/')">
+            <img src="/images/mobile/user/fukuang.png" alt="">
+            <p>付款账户</p>
+          </li>
+          <li @click="go('/mobile/user/address')">
+            <img src="/images/mobile/user/icon_06.png" alt="">
+            <p>收货地址</p>
+          </li>
+        </ul>
       </div>
-      <div class="line" @click="go('/mobile/user/storeinfo')" v-else>
-        <div class="img-wrap">
-          <img src="/images/mobile/user/apply-store.png" alt="">
-        </div>
-        <span>开店申请</span>
-        <i class="iconfont icon-xiangyou"></i>
-      </div>
-      <div class="line block-line" @click="go('/mobile/user/enterpriseinfo')">
-        <div class="img-wrap">
-          <img src="/images/mobile/user/icon_03.png" alt="">
-        </div>
-        <span>企业信息</span>
-        <i class="iconfont icon-xiangyou"></i>
-        <div class="border-line"></div>
+
+      <div class="block-wrap seek-operation">
+        <p><i></i>更多信息</p>
+        <ul>
+          <li @click="go('/mobile/user/enterpriseinfo')">
+            <img src="/images/mobile/user/icon_03.png" alt="">
+            <p>企业信息</p>
+          </li>
+          <li @click="go('/mobile/user/info/admin')">
+            <img src="/images/mobile/user/icon_05.png" alt="">
+            <p>管理员信息</p>
+          </li>
+          <li @click="go('/')">
+            <img src="/images/mobile/center/vendor/onsale.png" alt="">
+            <p>员工管理</p>
+          </li>
+        </ul>
       </div>
+
+    <!--<div class="mobile-user mobile-fix-content">-->
+      <!--<nuxt-link to="/mobile/user/info/personal" tag="div" class="line img-line">-->
+        <!--<div class="img-wrap">-->
+          <!--<img :src="user.data.imageUrl ? user.data.imageUrl : '/images/component/default.png'" alt="" class="photo"/>-->
+        <!--</div>-->
+        <!--<span>{{user.data.userName}}</span>-->
+        <!--<span class="tel">{{user.data.userTel}}</span>-->
+        <!--<span class="edit" to="/mobile/user/info/personal">-->
+          <!--<img src="/images/mobile/user/edit.png" alt=""/>-->
+        <!--</span>-->
+      <!--</nuxt-link>-->
+      <!--<div class="line" @click="showLogin=true">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_01.png" alt="">-->
+        <!--</div>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+        <!--<span class="l-right inline-block">{{currentEnName}}</span>-->
+      <!--</div>-->
+      <!--<div class="line" @click="go('/mobile/user/storeinfo')" v-if="storeStatus.uuid">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_02.png" alt="">-->
+        <!--</div>-->
+        <!--<span>店铺信息</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+      <!--</div>-->
+      <!--<div class="line" @click="go('/mobile/user/storeinfo')" v-else>-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/apply-store.png" alt="">-->
+        <!--</div>-->
+        <!--<span>开店申请</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+      <!--</div>-->
+      <!--<div class="line block-line" @click="go('/mobile/user/enterpriseinfo')">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_03.png" alt="">-->
+        <!--</div>-->
+        <!--<span>企业信息</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+        <!--<div class="border-line"></div>-->
+      <!--</div>-->
       <!--<nuxt-link to="/mobile/user/info/personal" tag="div" class="line block-line">-->
         <!--<div class="img-wrap">-->
           <!--<img src="/images/mobile/user/icon_04.png" alt="">-->
@@ -56,22 +123,24 @@
         <!--<i class="iconfont icon-xiangyou"></i>-->
         <!--<div class="border-line"></div>-->
       <!--</nuxt-link>-->
-      <div @click="go('/mobile/user/info/admin')" class="line block-line">
-        <div class="img-wrap">
-          <img src="/images/mobile/user/icon_05.png" alt="">
-        </div>
-        <span>管理员信息</span>
-        <i class="iconfont icon-xiangyou"></i>
-        <div class="border-line"></div>
-      </div>
-      <div @click="go('/mobile/user/address')" class="line block-line">
-        <div class="img-wrap">
-          <img src="/images/mobile/user/icon_06.png" alt="">
-        </div>
-        <span>收货地址信息</span>
-        <i class="iconfont icon-xiangyou"></i>
-        <div class="border-line"></div>
-      </div>
+      <!--<div @click="go('/mobile/user/info/admin')" class="line block-line">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_05.png" alt="">-->
+        <!--</div>-->
+        <!--<span>管理员信息</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+        <!--<div class="border-line"></div>-->
+      <!--</div>-->
+      <!--<div @click="go('/mobile/user/address')" class="line block-line">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_06.png" alt="">-->
+        <!--</div>-->
+        <!--<span>收货地址信息</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+        <!--<div class="border-line"></div>-->
+      <!--</div>-->
+
+
       <div class="deleteKuang" v-if="showLogout">
         <div class="kuangContent">
           <div class="title">系统提示</div>
@@ -206,6 +275,12 @@
   }
 </script>
 <style lang="scss" scoped>
+  @import '~assets/scss/mobileCenter';
+  .mobile-center{
+    .collect-block {
+      height: auto;
+    }
+  }
   .mobile-user {
     background: #f1f3f6;
     .line {

utils/baseUtils.js

@@ -211,9 +211,9 @@ const _formatDate = (date, fmt) => {
   let o = {
     'M+': date.getMonth() + 1, // 月份
     'd+': date.getDate(), // 日
-    'h+': 23, // 小时
-    'm+': 59, // 分
-    's+': 59, // 秒
+    'h+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
     'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
     'S': date.getMilliseconds() // 毫秒
   }
@@ -456,10 +456,19 @@ const _onFileUpload = ($this, file) => {
   }
 }
 
+// 排除空格的空字符串
 const _isEmptyStr = (str) => {
   return !str || !str.trim()
 }
 
+/*
+* 获取某个时间段去除时分秒的时间戳
+* @date 默认当天 Date格式
+* */
+const _getClearDay = (date = new Date()) => {
+  return new Date(_formatDate(date, 'yyyy-MM-dd')).getTime() - 8 * 60 * 60 * 1000
+}
+
 export default {
   // 获取字符串字符长度
   getRealLen: _getRealLen,
@@ -502,5 +511,7 @@ export default {
   setMessage: _setMessage,
   // 文件上传
   onFileUpload: _onFileUpload,
-  isEmptyStr: _isEmptyStr
+  isEmptyStr: _isEmptyStr,
+  // 获取00:00:00的时间
+  getClearDay: _getClearDay
 }