账户编辑修改

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/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,31 +36,24 @@ $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;
-        display: inline-block;
-        vertical-align: middle;
-        width: 62%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        &:nth-child(even) {
-          width: 38%;
-        }
         i {
           margin-right: .05rem;
         }
         .title {
           color: #666;
+          width: 23%;
         }
         .content {
-          text-align: left;
+          text-align: right;
+          width: 77%;
         }
         .link {
           color: $base-color;
@@ -84,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 {
@@ -292,4 +328,10 @@ $base-color: #3f84f6;
       margin: .24rem auto;
     }
   }
+  .mp-btn-wrap {
+    position: fixed;
+    bottom: 1.2rem;
+    left: 0;
+    right: 0;
+  }
 }

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,14 +24,22 @@
             <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">
@@ -88,7 +96,7 @@
           @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>

pages/mobile/center/vendor/payCenter.vue

@@ -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 -->
 
@@ -59,7 +61,7 @@
           @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>
@@ -87,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">
@@ -451,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(() => {
@@ -742,6 +747,7 @@
     }
   }
   .vendor-pay {
+    padding-bottom: 1rem;
     .mobile-modal .mobile-modal-wrapper {
       left: .2rem !important;
       right: .2rem !important;
@@ -749,6 +755,6 @@
   }
   .vendor-pay-record {
     /*bottom: 2.23rem !important;*/
-    padding-bottom: 1.25rem;
+    padding-bottom: 1.25rem !important;
   }
 </style>