Skip to content

H
hls-xcmg-vue-app
Commit 730af46e authored by linxin's avatar linxin
Browse files
Options

保证金支付修改

parent c9f3b534
Pipeline #2956 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 349 additions and 90 deletions
      src/pages/pay/marginPay/first-pay.vue
      View file @ 730af46e
      <template> <template>
      <h-view id="first-pay" class="public-style"> <h-view id="first-pay" class="public-style">
      <h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
      <img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
      <span>保证金支付</span> <span>保证金支付</span>
      </div> </div>
      </h-header> </h-header>
      <h-content> <h-content style="margin-top:-1px;">
      <div class="top-head"> <div class="top-head">
      <div class="center"> <div class="center">
      <div class="now-pay"> <div class="now-pay">
      ...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
      <div class="pay-input"> <div class="pay-input">
      <span>应还保证金</span> <span>应还保证金</span>
      <input v-model="money" type="text" placeholder="请输入支付金额" > <input v-model="money" type="text" placeholder="请输入支付金额" >
      <div> <!-- <div @click="createOrder">
      <img src="@/assets/payment/into.png" > <img src="@/assets/payment/into.png" >
      </div> </div> -->
      </div> </div>
      </div> </div>
      </div> </div>
      ...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
      </script> </script>
      <style lang='less' > <style lang='less' >
      #first-pay { #first-pay {
      .top-head { .top-head {
      width: 100%; width: 100%;
      height: 142px; height: 142px;
      background: url("../../../assets/payment/back1.png"); background: url("../../../assets/payment/back1.png");
      ......
      src/pages/pay/marginPay/pay-entry.vue
      View file @ 730af46e
      ...@@ -9,6 +9,113 @@ ...@@ -9,6 +9,113 @@
      </div> </div>
      </div> </div>
      </transition> </transition>
      <transition name="trans">
      <div v-show="show" class="modal-show-bank">
      <div class="down">
      <div class="top">
      <img src="@/assets/payment/back.png" @click="show=false" >
      <span>支付方式</span>
      </div>
      <scroll>
      <list-item :item-height="56" class="pay-way">
      <item
      v-for="(item,index) in nongBank"
      :proportion="[7,1,1]"
      :key="item.bank_account_num"
      @click.native="isSelect(`nong${index}`);ischeck(item)"
      >
      <div slot="name" style="flex=3">
      <img :src="selectImg(item)" alt class="icon" >
      {{ item.bank_full_name }}({{ selectLast(item) }})
      <img
      v-show="item.recommand"
      class="push"
      src="@/assets/payment/push.png"
      >
      </div>
      <section slot="content">
      <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
      <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
      <div slot="name">
      <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
      </div>
      <section slot="content">
      <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
      <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
      <div slot="name">
      <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
      </div>
      <section slot="content">
      <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
      <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item
      v-for="(item,index) in newList"
      :proportion="[7,1,1]"
      :key="index"
      @click.native="isSelect(`three${index}`);ischeck(item)"
      >
      <div slot="name" style="flex=3">
      <img :src="selectImg(item)" alt class="icon" >
      {{ item.bank_full_name }}({{ selectLast(item) }})
      <img
      v-show="item.recommand"
      class="push"
      src="@/assets/payment/push.png"
      >
      </div>
      <section slot="content">
      <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
      <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      </list-item>
      </scroll>
      </div>
      </div>
      </transition>
      <transition name="trans">
      <div v-show="confirm" class="modal-show-confirm">
      <div class="down">
      <div class="top">
      <img src="@/assets/payment/back.png" @click="confirm=false" >
      <span>确认付款</span>
      </div>
      <div class="info">
      <div class="info-item">
      <span>还款金额</span>
      <span>¥{{ money |currency }}</span>
      </div>
      <div class="interest">
      <span>本次交易收取{{ rate }}%服务费</span>
      </div>
      <div class="info-item">
      <span>服务费</span>
      <span>+¥{{ serviceCharge |currency }}</span>
      </div>
      <div class="info-item" @click="show=true">
      <span>付款方式</span>
      <span>
      <img :src="checkType.img" >
      <span>{{ checkType.bank_full_name }}</span>
      <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
      <img class="arrow" src="@/assets/payment/go.png" >
      </span>
      </div>
      </div>
      <bottom-tab>
      <tab-button class="foot" @click.native="pay">立即支付</tab-button>
      </bottom-tab>
      </div>
      </div>
      </transition>
      <h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
      <img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
      ...@@ -17,72 +124,34 @@ ...@@ -17,72 +124,34 @@
      </h-header> </h-header>
      <h-content class="entry-content"> <h-content class="entry-content">
      <div class="amount"> <div class="amount">
      <p>交易金额</p> <p>{{ userName }}</p>
      <div>￥{{ money |currency }}</div> <div>￥{{ sumMoney |currency }}</div>
      </div>
      <div class="info">
      <div class="info-item">
      <span>还款金额</span>
      <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
      </div>
      <div class="interest">
      <span>本次交易收取{{ rate }}%手续费</span>
      </div>
      <div class="info-item">
      <span>手续费</span>
      <span>+¥{{ serviceCharge }}</span>
      </div>
      <div class="info-item" @click="show=true">
      <span>付款方式</span>
      <span>
      <img :src="checkType.img" >
      <span>{{ checkType.bank_full_name }}</span>
      <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
      <img class="arrow" src="@/assets/payment/go.png" >
      </span>
      </div>
      </div> </div>
      <list-item :item-height="56" class="pay-way">
      <item
      v-for="(item,index) in nongBank"
      :proportion="[7,1,1]"
      :key="index"
      @click.native="isSelect(`nong${index}`)"
      >
      <div slot="name" style="flex=3">
      <img :src="selectImg(item)" alt class="icon" >
      {{ item.bank_full_name }}({{ selectLast(item) }})
      <img
      v-show="item.recommand"
      class="push"
      src="@/assets/payment/push.png"
      >
      </div>
      <section slot="content">
      <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
      <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item :proportion="[7,1,1]" @click.native="isSelect('one')">
      <div slot="name">
      <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
      </div>
      <section slot="content">
      <img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
      <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item :proportion="[7,1,1]" @click.native="isSelect('two')">
      <div slot="name">
      <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
      </div>
      <section slot="content">
      <img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
      <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      <item
      v-for="(item,index) in newList"
      :proportion="[7,1,1]"
      :key="index"
      @click.native="isSelect(`three${index}`)"
      >
      <div slot="name" style="flex=3">
      <img :src="selectImg(item)" alt class="icon" >
      {{ item.bank_full_name }}({{ selectLast(item) }})
      <img
      v-show="item.recommand"
      class="push"
      src="@/assets/payment/push.png"
      >
      </div>
      <section slot="content">
      <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
      <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
      </section>
      </item>
      </list-item>
      </h-content> </h-content>
      <bottom-tab> <bottom-tab>
      <tab-button class="foot" @click.native="pay">立即付款</tab-button> <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
      </bottom-tab> </bottom-tab>
      </h-view> </h-view>
      </template> </template>
      ...@@ -236,6 +305,9 @@ export default { ...@@ -236,6 +305,9 @@ export default {
      </script> </script>
      <style lang='less' > <style lang='less' >
      #pay-entry-margin { #pay-entry-margin {
      .vue-better-scroll__wrapper{
      padding: 0;
      }
      .trans-enter-active, .trans-enter-active,
      .trans-leave-active { .trans-leave-active {
      transition: opacity 0.5s; transition: opacity 0.5s;
      ...@@ -244,6 +316,209 @@ export default { ...@@ -244,6 +316,209 @@ export default {
      .trans-leave-active { .trans-leave-active {
      opacity: 0; opacity: 0;
      } }
      .modal-show-confirm {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      z-index: 900;
      background-color: rgba(56, 63, 69, 0.3);
      justify-content: center;
      align-items: center;
      .down {
      height: 466px;
      width: 100%;
      position: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
      width: 330px;
      height: 54px;
      display: flex;
      align-items: center;
      background-color: #fff;
      img {
      width: 20px;
      }
      span {
      margin-left: 38%;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #656464;
      letter-spacing: 0.49px;
      text-align: center;
      }
      }
      .info {
      //margin-top: 60px;
      }
      }
      }
      .modal-show-bank {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      z-index: 910;
      background-color: rgba(56, 63, 69, 0.3);
      justify-content: center;
      align-items: center;
      .down {
      height: 466px;
      width: 100%;
      position: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
      left: 24px;
      width: 330px;
      height: 54px;
      display: flex;
      align-items: center;
      background-color: #fff;
      img {
      width: 20px;
      }
      span {
      margin-left: 38%;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #656464;
      letter-spacing: 0.49px;
      text-align: center;
      }
      }
      .pay-way {
      //width: 350px;
      //margin: 0 auto;
      width: 100%;
      padding: 0 4% 0 4%;
      background: #fff;
      .hls-item {
      padding-left: 12px;
      .add-name {
      flex: 3;
      line-height: 56px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #656464;
      div{
      display: flex;
      justify-content: center;
      align-items: center;
      }
      .icon1 {
      width: 34px;
      height: 34px;
      display: block;
      float: left;
      margin-top: 10px;
      margin-right: 5px;
      }
      .icon2 {
      width: 32px;
      display: block;
      float: left;
      margin-top: 12px;
      margin-right: 8px;
      }
      .icon {
      width: 30px;
      /* display: block;
      float: left;
      position: relative;*/
      margin: 0 8px 0 3px;
      }
      }
      .add-content {
      img {
      width: 21px;
      }
      }
      }
      }
      }
      }
      .info {
      width: 100%;
      height: 226px;
      background-color: #fff;
      .info-item {
      height: 46px;
      width: 335px;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .arrow {
      margin-right: -10px;
      }
      img {
      width: 17px;
      margin-right: 10px;
      }
      span:first-child {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
      line-height: 18px;
      }
      span:last-child {
      font-family: Verdana;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      line-height: 18px;
      display: flex;
      align-items: center;
      }
      }
      .info-item:nth-of-type(1)::after {
      content: "";
      display: block;
      position: absolute;
      right: 20px;
      top: 25px;
      border: 10px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: rgba(75, 74, 75, 0.1);
      }
      .info-item:nth-of-type(1) {
      border-top: 1px solid #d9dbdf;
      }
      .interest {
      width: 100%;
      height: 37px;
      line-height: 37px;
      font-family: PingFangSC-Medium;
      font-size: 11px;
      color: #4b4a4b;
      letter-spacing: 0;
      text-indent: 215px;
      background-color: rgba(75, 74, 75, 0.1);
      }
      }
      .push {
      /* position: absolute;
      top: 10px;
      margin-left: 10px;*/
      width: 35px;
      }
      .modal-show { .modal-show {
      width: 100%; width: 100%;
      height: 100%; height: 100%;
      ...@@ -292,21 +567,12 @@ export default { ...@@ -292,21 +567,12 @@ export default {
      } }
      } }
      } }
      .push {
      position: absolute;
      top: 10px;
      margin-left: 10px;
      width: 35px;
      }
      .entry-content { .entry-content {
      .amount { .amount {
      height: 166px; height: 166px;
      background-color: #fff; background-color: #fff;
      padding-top: 55px; padding-top: 55px;
      text-align: center; text-align: center;
      border-bottom: 1px solid #d9dbdf;
      p { p {
      font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
      font-size: 14px; font-size: 14px;
      ...@@ -349,13 +615,6 @@ export default { ...@@ -349,13 +615,6 @@ export default {
      margin-top: 12px; margin-top: 12px;
      margin-right: 8px; margin-right: 8px;
      } }
      .icon {
      width: 30px;
      display: block;
      float: left;
      position: relative;
      margin: 12px 8px 0 3px;
      }
      } }
      .add-content { .add-content {
      ...@@ -367,8 +626,8 @@ export default { ...@@ -367,8 +626,8 @@ export default {
      } }
      } }
      .foot { .foot {
      background-color: @headerColor;
      color: #fff; color: #fff;
      background-color: @headerColor;
      } }
      } }
      </style> </style>
      src/pages/userBind/np/naturePerson.vue
      View file @ 730af46e
      ...@@ -311,14 +311,14 @@ ...@@ -311,14 +311,14 @@
      </div> </div>
      </div> </div>
      </div> </div>
      <!-- <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake"> <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake">
      <img src="@/assets/userBind/tax.png" class="left-img"> <img src="@/assets/userBind/tax.png" class="left-img">
      <div> <div>
      <span>缴纳保证金</span> <span>缴纳保证金</span>
      <p>已缴纳：500000</p> <p>已缴纳：500000</p>
      </div> </div>
      <img src="@/assets/userBind/arrow-right.png" class="right-img"> <img src="@/assets/userBind/arrow-right.png" class="right-img">
      </div>--> </div>
      </div> </div>
      <BankInfo <BankInfo
      ...@@ -369,15 +369,15 @@ ...@@ -369,15 +369,15 @@
      <list-item :item-height="44" class="card-Info"> <list-item :item-height="44" class="card-Info">
      <item> <item>
      <div slot="name">银行卡卡号</div> <div slot="name">银行卡卡号</div>
      <input slot="content" readonly v-model="bank.bank_account_num" placeholder="识别银行卡自动填充"> <input slot="content" v-model="bank.bank_account_num" readonly placeholder="识别银行卡自动填充">
      </item> </item>
      <item> <item>
      <div slot="name">账户姓名</div> <div slot="name">账户姓名</div>
      <input slot="content" readonly v-model="bank.bank_account_name" placeholder="请输入账户名称" > <input slot="content" v-model="bank.bank_account_name" readonly placeholder="请输入账户名称" >
      </item> </item>
      <item> <item>
      <div slot="name">银行名称</div> <div slot="name">银行名称</div>
      <input slot="content" readonly v-model="bank.bank_full_name" placeholder="识别银行卡自动填充" > <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" >
      </item> </item>
      <item> <item>
      <div slot="name">支行名称</div> <div slot="name">支行名称</div>
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment