手机端收付款帐户空状态修改

pages/mobile/center/user/payCenter.vue

@@ -6,40 +6,71 @@
     <!--</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>-->
-      <ul class="mp-list">
-        <li v-for="account in accountList">
-          <div class="content-line">
-            <span class="inline-block title">开户银行：</span>
-            <span class="inline-block content text-ellipse">{{account.bankname}}</span>
+      <template v-if="accountList && accountList.length === 0">
+        <div class="new-account">
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户银行：</span>
+            <input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showSimilar = !showSimilar">
+            <ul v-if="showSimilar" class="similar">
+              <li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
+            </ul>
           </div>
-          <div class="content-line">
-            <span class="inline-block title">开户支行：</span>
-            <span class="inline-block content text-ellipse">{{account.branchname}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户支行：</span>
+            <input type="text" placeholder="例如：乔香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
           </div>
-          <div class="content-line">
-            <span class="inline-block title">银行账户：</span>
-            <span class="inline-block content text-ellipse">{{account.number}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>银行账号：</span>
+            <input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
           </div>
-          <div class="content-line">
-            <span class="inline-block title">开户名称：</span>
-            <span class="inline-block content text-ellipse">{{account.accountname}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户名称：</span>
+            <input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
           </div>
-         <!-- <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" @click="setRemindText('该账户是默认账户')"><i class="iconfont icon-gouxuan1"></i>默认账户</a>
-            <a class="inline-block" 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 class="new-content-line clearfix">
+            <p class="remind"><i>*</i>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</p>
           </div>
-        </li>
-      </ul>
-      <div class="com-btn-wrap mp-btn-wrap">
-        <button @click.stop="openAddAccount"><i class="iconfont icon-add"></i>新增账户</button>
-      </div>
+          <div class="am-btn-wrap">
+            <button @click="addAccount">确认</button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <ul class="mp-list">
+          <li v-for="account in accountList">
+            <div class="content-line">
+              <span class="inline-block title">开户银行：</span>
+              <span class="inline-block content text-ellipse">{{account.bankname}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">开户支行：</span>
+              <span class="inline-block content text-ellipse">{{account.branchname}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">银行账户：</span>
+              <span class="inline-block content text-ellipse">{{account.number}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">开户名称：</span>
+              <span class="inline-block content text-ellipse">{{account.accountname}}</span>
+            </div>
+            <!-- <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" @click="setRemindText('该账户是默认账户')"><i class="iconfont icon-gouxuan1"></i>默认账户</a>
+              <a class="inline-block" 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>
+      </template>
     </div>
     <div class="mp-record" v-if="switchType == 'record'">
       <div class="search-content">
@@ -165,7 +196,7 @@
         </div>
       </div>
     </div>
-    <empty-status v-if="isEmpty" :text="switchType == 'record' ? '暂无支付记录，请下单购买商品吧！' : '暂无账户信息'" :showLink="true"></empty-status>
+    <empty-status v-if="isEmpty" :text="'暂无支付记录，请下单购买商品吧！'" :showLink="true"></empty-status>
     <!-- 新增账户弹框end -->
   </div>
 </template>
@@ -341,6 +372,11 @@
         immediate: true
       }
     },
+    mounted () {
+      this.$http.get('/data/bank.json').then(res => {
+        this.bankList = res.data.list
+      })
+    },
     computed: {
       accountData () {
         return this.$store.state.payCenter.data.buyerAccount
@@ -361,7 +397,7 @@
         return this.switchType === 'account' ? this.buyerAccount.totalPages : this.buyerRecord.totalPages
       },
       isEmpty () {
-        return (this.switchType === 'record' && this.recordList.length === 0) || (this.switchType === 'account' && this.accountList.length === 0)
+        return (this.switchType === 'record' && this.recordList.length === 0)
       }
     },
     methods: {
@@ -598,6 +634,7 @@
             if (res.data.id) {
               this.setRemindText('新增账户成功')
               this.initList()
+              this.initAccount()
               this.showModal = false
             } else {
               this.setRemindText('新增账户失败')
@@ -613,4 +650,140 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/mobilePayCenter';
+  .new-account {
+    padding: .24rem;
+    background: #fff;
+    i {
+      font-style: normal;
+      color: #ff0000;
+    }
+    .new-content-line {
+      margin-bottom: .3rem;
+      position: relative;
+      span {
+        width: 2.5rem;
+        color: #226ce7;
+        font-size: .28rem;
+        text-align: right;
+      }
+      input[type='text'] {
+        width: 3.59rem;
+        height: .56rem;
+        font-size: .24rem;
+        border-radius: .04rem;
+        border: 1px solid #d2d2d2;
+        padding: 0 .2rem;
+      }
+      input[readonly] {
+        background: url('/images/mobile/select-arrow.png') no-repeat;
+        background-size: .24rem .15rem;
+        background-position: 3.1rem .2rem;
+      }
+      .similar {
+        position: absolute;
+        left: 2.5rem;
+        border: 1px solid $base-color;
+        border-radius: .04rem;
+        top: .56rem;
+        width: 3.59rem;
+        background: #fff;
+        z-index: 1;
+        max-height: 3.96rem;
+        overflow-y: auto;
+        li {
+          height: .66rem;
+          line-height: .66rem;
+          padding: 0 .19rem;
+          font-size: .24rem;
+          &:active, &:focus {
+            background: #f7f7f7;
+          }
+        }
+      }
+    }
+    .remind {
+      color: #666;
+      font-size: .24rem;
+      width: 3.59rem;
+      float: right;
+      margin-right: .44rem;
+      line-height: .37rem;
+      i {
+        margin-right: .05rem;
+      }
+    }
+    .am-btn-wrap {
+      margin-top: .74rem;
+      button {
+        width: 92%;
+        height: .77rem;
+        line-height: .77rem;
+        color: #fff;
+        font-size: .32rem;
+        border-radius: .08rem;
+        background: #bfbfbf;
+        &:last-child {
+          background: $base-color;
+          margin-left: .3rem;
+        }
+      }
+    }
+  }
+  .ra-remind {
+    width: 6.3rem;
+    height: 3.5rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -1.75rem;
+    margin-left: -3.15rem;
+    border-radius: .15rem;
+    .header {
+      height: .6rem;
+      line-height: .6rem;
+      background: #3976f4;
+      border-top-left-radius: .15rem;
+      border-top-right-radius: .15rem;
+      i {
+        font-size: .32rem;
+        color: #fff;
+        float: right;
+        margin-right: .28rem;
+      }
+    }
+    .content {
+      background: #fff;
+      padding: .53rem .77rem;
+      span {
+        font-size: .32rem;
+      }
+      i {
+        font-size: .44rem;
+        color: #3976f4;
+        float: left;
+        margin-right: .2rem;
+      }
+    }
+    .footer {
+      background: #fff;
+      padding-bottom: .37rem;
+      text-align: center;
+      border-bottom-left-radius: .15rem;
+      border-bottom-right-radius: .15rem;
+      margin-top: -0.05rem;
+      button {
+        width: 2.22rem;
+        height: .77rem;
+        line-height: .77rem;
+        color: #fff;
+        font-size: .32rem;
+        border-radius: .08rem;
+        background: #bfbfbf;
+        &:last-child {
+          background: $base-color;
+          margin-left: .3rem;
+        }
+      }
+    }
+  }
 </style>

pages/mobile/center/vendor/payCenter.vue

@@ -8,40 +8,89 @@
     <!-- 账户信息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>-->
-      <ul class="mp-list">
-        <li v-for="account in accountList">
-          <div class="content-line">
-            <span class="inline-block title">开户银行：</span>
-            <span class="inline-block content text-ellipse">{{account.bankname}}</span>
+      <template v-if="accountList && accountList.length === 0">
+        <div class="new-account">
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户银行：</span>
+            <input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showNewSimilar = !showNewSimilar">
+            <ul v-if="showNewSimilar" class="similar">
+              <li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
+            </ul>
           </div>
-          <div class="content-line">
-            <span class="inline-block title">开户支行：</span>
-            <span class="inline-block content text-ellipse">{{account.branchname}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户支行：</span>
+            <input type="text" placeholder="例如：乔香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
           </div>
-          <div class="content-line">
-            <span class="inline-block title">银行账户：</span>
-            <span class="inline-block content text-ellipse">{{account.number}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>银行账号：</span>
+            <input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
           </div>
-          <div class="content-line">
-            <span class="inline-block title">开户名称：</span>
-            <span class="inline-block content text-ellipse">{{account.accountname}}</span>
+          <div class="new-content-line">
+            <span class="inline-block"><i>*</i>开户名称：</span>
+            <input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
           </div>
-          <div class="content-line">
-            <span class="inline-block title">状态：</span>
-            <span class="inline-block content text-ellipse">
+          <div class="new-content-line upload">
+            <span class="inline-block"><i>*</i>上传开户许可证：</span>
+            <input type="text" v-model="file.name" disabled>
+            <label class="upload-btn">选择文件
+              <input type="file" @change="onUpload($event)" accept="image/jpeg,image/jpg,image/png,.pdf">
+            </label>
+          </div>
+          <div class="am-btn-wrap">
+            <button @click="addAccount">确认</button>
+          </div>
+          <p class="am-remind-text clearfix">
+            <i class="fl">*声明:</i>
+            <span class="fr">
+              1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。
+              <br/>
+              2. 卖家只能有唯一一个“使用中”的收款账户，新增账户审核通过后，原账户将自动失效。
+              <br/>
+              3. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。
+              <br/>
+              4. 更多的条款请阅读《优软商城代收代付协议》 。
+              <br/>
+              5. 附件仅支持JPG、PNG、PDF格式，大小超过3M。
+            </span>
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <ul class="mp-list">
+          <li v-for="account in accountList">
+            <div class="content-line">
+              <span class="inline-block title">开户银行：</span>
+              <span class="inline-block content text-ellipse">{{account.bankname}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">开户支行：</span>
+              <span class="inline-block content text-ellipse">{{account.branchname}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">银行账户：</span>
+              <span class="inline-block content text-ellipse">{{account.number}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">开户名称：</span>
+              <span class="inline-block content text-ellipse">{{account.accountname}}</span>
+            </div>
+            <div class="content-line">
+              <span class="inline-block title">状态：</span>
+              <span class="inline-block content text-ellipse">
               {{account.status | bankStatusFilter}}
               <i v-if="account.status == 101" class="iconfont icon-tixing"></i>
             </span>
-          </div>
-          <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>
+            <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>
+      </template>
     </div>
     <!-- 账户信息end -->
 
@@ -168,7 +217,7 @@
 
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
     <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
-    <empty-status v-if="isEmpty" :text="switchType == 'record' ? '暂无交易记录' : '暂无账户信息'" :showLink="true"></empty-status>
+    <empty-status v-if="isEmpty" :text="暂无交易记录" :showLink="true"></empty-status>
   </div>
 </template>
 <script>
@@ -193,6 +242,7 @@
         showModal: false,
         bankList: [],
         showSimilar: false,
+        showNewSimilar: false,
         bankAccountObj: {
           bankname: '',
           branchname: '',
@@ -291,6 +341,13 @@
         switchType: route.query.switchType || 'record'
       }
     },
+    mounted () {
+      if (!this.bankList || !this.bankList.length) {
+        this.$http.get('/data/bank.json').then(res => {
+          this.bankList = res.data.list
+        })
+      }
+    },
     watch: {
       'vendorAccount': {
         handler: function (val) {
@@ -371,7 +428,7 @@
         return this.switchType === 'account' ? this.vendorAccount.totalPages : this.vendorRecord.totalPages
       },
       isEmpty () {
-        return (this.switchType === 'record' && this.recordList.length === 0) || (this.switchType === 'account' && this.accountList.length === 0)
+        return (this.switchType === 'record' && this.recordList.length === 0)
       },
       currencySymbol () {
         return this.recordList[0] ? this.recordList[0].currencyName : 'RMB'
@@ -526,6 +583,7 @@
       setBankName (name) {
         this.bankAccountObj.bankname = name
         this.showSimilar = false
+        this.showNewSimilar = false
         this.validBankAccountObj.bankname = true
       },
       checkBranchname () {
@@ -605,6 +663,7 @@
             if (res.data.id) {
               this.setRemindText('新增账户成功')
               this.initList()
+              this.initAccount()
               this.showModal = false
             } else {
               this.setRemindText('新增账户失败')
@@ -632,61 +691,138 @@
 </script>
 <style lang="scss">
   @import '~assets/scss/mobilePayCenter';
-  .reuse-account-modal {
-    .ra-remind {
-      width: 6.3rem;
-      height: 3.5rem;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -1.75rem;
-      margin-left: -3.15rem;
-      border-radius: .15rem;
-      .header {
-        height: .6rem;
-        line-height: .6rem;
-        background: #3976f4;
-        border-top-left-radius: .15rem;
-        border-top-right-radius: .15rem;
-        i {
-          font-size: .32rem;
-          color: #fff;
-          float: right;
-          margin-right: .28rem;
-        }
+  .new-account {
+    padding: .24rem;
+    background: #fff;
+    i {
+      font-style: normal;
+      color: #ff0000;
+    }
+    .new-content-line {
+      margin-bottom: .3rem;
+      position: relative;
+      span {
+        width: 2.5rem;
+        color: #226ce7;
+        font-size: .28rem;
+        text-align: right;
       }
-      .content {
+      input[type='text'] {
+        width: 3.59rem;
+        height: .56rem;
+        font-size: .24rem;
+        border-radius: .04rem;
+        border: 1px solid #d2d2d2;
+        padding: 0 .2rem;
+      }
+      input[readonly] {
+        background: url('/images/mobile/select-arrow.png') no-repeat;
+        background-size: .24rem .15rem;
+        background-position: 3.1rem .2rem;
+      }
+      .similar {
+        position: absolute;
+        left: 2.5rem;
+        border: 1px solid $base-color;
+        border-radius: .04rem;
+        top: .56rem;
+        width: 3.59rem;
         background: #fff;
-        padding: .53rem .77rem;
-        span {
-          font-size: .32rem;
+        z-index: 1;
+        max-height: 3.96rem;
+        overflow-y: auto;
+        li {
+          height: .66rem;
+          line-height: .66rem;
+          padding: 0 .19rem;
+          font-size: .24rem;
+          &:active, &:focus {
+            background: #f7f7f7;
+          }
         }
-        i {
-          font-size: .44rem;
-          color: #3976f4;
-          float: left;
-          margin-right: .2rem;
+      }
+    }
+    .remind {
+      color: #666;
+      font-size: .24rem;
+      width: 3.59rem;
+      float: right;
+      margin-right: .44rem;
+      line-height: .37rem;
+      i {
+        margin-right: .05rem;
+      }
+    }
+    .am-btn-wrap {
+      margin-top: .74rem;
+      button {
+        width: 92%;
+        height: .77rem;
+        line-height: .77rem;
+        color: #fff;
+        font-size: .32rem;
+        border-radius: .08rem;
+        background: #bfbfbf;
+        &:last-child {
+          background: $base-color;
+          margin-left: .3rem;
         }
       }
-      .footer {
-        background: #fff;
-        padding-bottom: .37rem;
-        text-align: center;
-        border-bottom-left-radius: .15rem;
-        border-bottom-right-radius: .15rem;
-        margin-top: -0.05rem;
-        button {
-          width: 2.22rem;
-          height: .77rem;
-          line-height: .77rem;
-          color: #fff;
-          font-size: .32rem;
-          border-radius: .08rem;
-          background: #bfbfbf;
-          &:last-child {
-            background: $base-color;
-            margin-left: .3rem;
-          }
+    }
+  }
+  .ra-remind {
+    width: 6.3rem;
+    height: 3.5rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -1.75rem;
+    margin-left: -3.15rem;
+    border-radius: .15rem;
+    .header {
+      height: .6rem;
+      line-height: .6rem;
+      background: #3976f4;
+      border-top-left-radius: .15rem;
+      border-top-right-radius: .15rem;
+      i {
+        font-size: .32rem;
+        color: #fff;
+        float: right;
+        margin-right: .28rem;
+      }
+    }
+    .content {
+      background: #fff;
+      padding: .53rem .77rem;
+      span {
+        font-size: .32rem;
+      }
+      i {
+        font-size: .44rem;
+        color: #3976f4;
+        float: left;
+        margin-right: .2rem;
+      }
+    }
+    .footer {
+      background: #fff;
+      padding-bottom: .37rem;
+      text-align: center;
+      border-bottom-left-radius: .15rem;
+      border-bottom-right-radius: .15rem;
+      margin-top: -0.05rem;
+      button {
+        width: 2.22rem;
+        height: .77rem;
+        line-height: .77rem;
+        color: #fff;
+        font-size: .32rem;
+        border-radius: .08rem;
+        background: #bfbfbf;
+        &:last-child {
+          background: $base-color;
+          margin-left: .3rem;
         }
       }
     }
@@ -697,7 +833,7 @@
   .upload {
     input[disabled] {
       background: #eee;
-      width: 2.88rem !important;
+      width: 2.18rem !important;
     }
     .upload-btn {
       display: inline-block;