# yuPay 付款组件

<template>
  <yu-pay :pay-show.sync="payShow" title="向宇信科技付款" :bankName="bankName" :bankNum="banNum" money="100" :bankLogo="bankLog" @comfirm="comfirm" @changePay="changePay"></yu-pay>
  <yu-password-input :password-show.sync="passwordShow" :money="money" @cancel="cancelPay" type="transfer" title="请输入六位支付密码" receiveNum="2734739574547716" receiveBank="中国银行" receiveName="宇信小甜甜" :payAct="banNum" @comfirm="comfirmPay"></yu-password-input>
  <yu-choose-bankcard :show.sync="chooseShow" :card-list="cardList" @check="checkFn" @cancel="chooseShow = false" @comfirm="comfirmChooseBank" ></yu-choose-bankcard>
  <van-button type="primary" @click="payShow = true" block>选择支付</van-button>
<template>
<script>
  import yuPay from '@/components/yu-pay/index.vue'
  import yuPasswordInput from '@/components/yu-password-input/index.vue'
  import yuChooseBankcard from '@/components/yu-choose-bankcard/index.vue'
  import ZGYH from '@/assets/img/banklogo/104100000004.png'
  import { BANK_TYPE } from '@/common/params/index.js'
  export default {
    components: {
      demoSection,
      demoBlock,
      yuPay, 
      yuPasswordInput,
      yuChooseBankcard
    },
    data() {
      return {
        passwordShow: false,
        payShow: true,
        banNum: '6217898356782450001',
        bankLog: ZGYH,
        bankName: '中国银行',
        money: '2000',
        chooseShow: false,
        cardList: [
          {
            accountNo: '6217898356782452098',
            checked: true,
            bankNo: '103100000026'
          },
          {
            accountNo: '6217898356782450927',
            bankNo: '104100000004'
          },
          {
            accountNo: '6217898356782453546',
            bankNo: '105100000017'
          },
          {
            accountNo: '621789835678245323',
            bankNo: '308584000013'
          }
        ]     
      };
    },
    activated() {
      this.payShow = true;
    },
    methods: {
      comfirm(value) {
        this.payShow = false;
        this.passwordShow = true;
        console.log('输入密码111', value)
      },
      comfirmPay(value) {
        console.log('确认支付', value)
      },
      cancelPay() {

      },
      changePay() {
        this.chooseShow = true;
      },
      checkFn() {

      },
      comfirmChooseBank(item) {
        this.banNum = item.accountNo;
        this.bankLog = `@/assets/img/banklogo/${item.bankNo}.png`
        this.bankName = BANK_TYPE[`${item.bankNo.substring(0, 3)}`];
      }

    }
  };
</script>

<style lang="scss">

</style>