# 业务组件

<template>
  <yu-search @search="searchFn" :delay="1000" delayType="throttle"></yu-search>
<template>
<script>
  import yuSearch from '@/components/yu-search/index.vue';
  export default {
    components: {
     yuSearch
    },
    data() {
    },
    methods: {
    searchFn(value) {
      console.log('页面查询触发', value);
    }
    },
  }
</script>

<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>

<template>
  <div style="height: 100%;">
    <yu-pdf :url="pdfUrl" :height="'800px'" :width="'100%'"></yu-pdf>
  </div>
</template>

<script>
import yuPdf from '@/components/yu-pdf/index.vue'
export default {
  components: {
    yuPdf
  },
  data() {
    return {
      pdfUrl: 'http://210.12.198.141:30527/cmis-contract/api/handlerfile/reviewPdfWithWaterMark?contNo=BSNPLANID20240422000713'
    };
  },
  methods: {
    
  }
};
</script>

<template>
  <div>
    <van-button @click="passwordShow = true">点击输入密码</van-button>
    <yu-password-input :password-show.sync="passwordShow" :money="money" @cancel="cancelPay"
      type="transfer" title="请输入六位支付密码" 
      receiveNum="2734739574547716"
      receiveBank="中国银行" receiveName="宇信小甜甜" :payAct="banNum" @confirm="comfirmPay">
    </yu-password-input>
  </div>
<template>
<script>
  import yuPasswordInput from '@/components/yu-password-input/index.vue';
  export default {
    components: {
     yuPasswordInput
    },
    data() {
      return {
        passwordShow: false,
        money: '2000',
        banNum: '6217898356782450001',
      };
    },
    methods: {
      cancelPay() {
      },
      comfirmPay(value) {
        console.log("输入密码", value)
      }
    }
  };
</script>

<template>
  <yu-input-money ref="inputMoney" placeholder="请输入金额" @input="onInput" :isFormItem="true"></yu-input-money>
<template>
<script>
  import yuInputMoney from '@/components/yu-input-money/index.vue';
  export default {
    components: {
     yuInputMoney
    },
    data() {
      return {};
    },
    methods: {
      onInput(value) {
        console.log('获得输入值------------- ', value);
      }
    }
  };
</script>

<template>
  <yu-input-money ref="inputMoney" placeholder="请输入金额" @input="onInput" :isFormItem="false"></yu-input-money>

<template>
<script>
  import yuInputMoney from '@/components/yu-input-money/index.vue';
  export default {
    components: {
     yuInputMoney
    },
    data() {
      return {};
    },
    methods: {
      onInput(value) {
        console.log('获得输入值------------- ', value);
      }
    }
  };
</script>

<<template>
  <div>
    <yu-input-num v-model="guarAmt1" name="thsGuarAmt" label="金额" placeholder="请输入本次担保金额" required :rules="[{ required: true, message: '请输入本次担保金额' }]" />
    <yu-input-num v-model="guarAmt2" name="thsGuarAmt" label="正整数" placeholder="请输入" required :rules="[{ required: true, message: '请输入' }]" :numType="'digit'" />
    <yu-input-num v-model="guarAmt3" name="thsGuarAmt" label="数字" placeholder="请输入" required :rules="[{ required: true, message: '请输入' }]" :numType="'number'" :clearable="true"/>
  </div>
</template>

<script>
import yuInputNum from '@/components/yu-input-num/index.vue'
export default {
  components: {
    yuInputNum
  },
  data() {
    return {
      guarAmt1: '',
      guarAmt2: '',
      guarAmt3: ''

    };
  },
  methods: {
    changeIndex(val) {
      console.log('changeIndex: ', val);
    }
  }
};
</script>

<style lang="scss">

</style>

<template>
  <div style="height: 100%;">
    <yu-ocr label="身份证号码" :idType="'2'" required placeholder="请录入证件号码" v-model="ocrResult1" name="cert"  :disabled="false" @change="changeFn1"></yu-ocr>
    <yu-ocr label="银行卡账号" :idType="'4'" required placeholder="请录入银行卡号码" v-model="ocrResult2" name="cert"  :disabled="false" @change="changeFn2"></yu-ocr>
  </div>
</template>

<script>
import yuOcr from '@/components/yu-ocr/index.vue'
export default {
  components: {
    yuOcr
  },
  data() {
    return {
      ocrResult1: '',
      ocrResult2: ''
    };
  },
  methods: {
    changeFn1(val) {
      console.log(' ======== >>>>', this.ocrResult1)
    },
    changeFn2(val) {
      console.log(' ======== >>>>', this.ocrResult2)
    }
  }
};
</script>

<template>
  <div>
    <van-button @click="chooseShow = true">点击选择银行卡</van-button>
    <yu-choose-bankcard :show.sync="chooseShow" :card-list="cardList" @check="checkFn" 
    @cancel="chooseShow = false" @comfirm="chooseShow = false"></yu-choose-bankcard>
  </div>
<template>
<script>
  import yuChooseBankcard from '@/components/yu-choose-bankcard/index.vue';
  export default {
    components: {
     yuChooseBankcard
    },
    data() {
      return {
        chooseShow: false,
        cardList: [
          {
            accountNo: '6217898356782452098',
            checked: true,
            bankNo: '103100000026'
          },
          {
            accountNo: '6217898356782450927',
            bankNo: '104100000004'
          },
          {
            accountNo: '6217898356782453546',
            bankNo: '105100000017'
          },
          {
            accountNo: '621789835678245323',
            bankNo: '308584000013'
          }
        ]
      }
    },
    methods: {
      checkFn(a, b) {
        console.log('check触发', a, b);
      },
      cancel() {
        // 取消
      },
      comfirm() {
        // 提交
      }
    },
  }
</script>

<template>
  <yu-date-picker 
  v-model="selectDate1" 
  name="endDate" 
  label="合同结束日" 
  label-width="150px"  
  :disabled="false" 
  :details="false" 
  placeholder="请选择" 
  right-icon="share-o" 
  required 
  :rules="[{ required: true, message: '请选择合同结束日' }]" 
  format="yyyy年MM月dd日" 
  :minDate="new Date(2022,0,1)" 
  :maxDate="new Date(2025,12,0)" 
  :readonly="false" 
  @change="changeSelect"
  @input="changeInput"/>
<template>
<script>
  import yuCheckbox from '@/components/yu-checkbox/index.vue'
  export default {
    components: {
      yuDatePicker
    },
    data() {
      return {
        selectDate1: new Date(),
      };
    },
    methods: {
      changeSelect(val) {
        console.log('==changeSelect=======>', this.selectDate1)
      },
      changeInput(val) {
        console.log('==changeInput=======>', this.selectDate1)
      }
    }
  }
</script>

<template>
  <div style="height: 100%;">
    <yu-double-record @recordResult="recordResult"></yu-double-record>
  </div>
</template>

<script>
import yuDoubleRecord from '@/components/yu-double-record/index.vue'
export default {
  components: {
    yuDoubleRecord
  },
  data() {
    return {
      ocrResult2: {}
    };
  },
  methods: {
    recordResult(val) {
      console.log(' ======== >>>>', val)
    }
  }
};
</script>

<template>
  <yu-svg-icon type="add"></yu-svg-icon>
<template>
<script>
  export default {
    data() {
    },
    methods: {
    },
  }
</script>

<template>
    <yu-img-swiper :images="images" @userClick="goChangeImg"></yu-img-swiper>
<template>
<script>
  import img1 from '@/assets/img/entrance.png'
  import yuImgSwiper from '@/components/yu-img-swiper/index.vue';
  export default {
    components: {
     yuImgSwiper
    },
    data() {
      return {
        images: [
          img1,
          img1,
          'https://pic4.zhimg.com/80/v2-94a0bc8b2774dc9a4dc9a7a01981d30b_1440w.webp',
          'https://pic3.zhimg.com/80/v2-121ad85546ecc7a044558593f30dea8a_1440w.webp'
        ]
      }
    },
    methods: {
      goChangeImg(val) {
        console.log('goChangeImg:', val)
      }
    }
  }
</script>

<template>
  <yu-sign-canvas ref="signCanvas" @saveSign="saveSign"></yu-sign-canvas>
<template>
<script>
  import yuSignCanvas from '@/components/yu-sign-canvas/index.vue';
  export default {
    components: {
     yuSignCanvas
    },
    data() {
    },
    methods: {
      saveSign(img) {
        console.log(img, 'img')
      }
    },
  }
</script>

<template>
  <yu-sign :before-valid="sighBforeValid" v-model="imageUrl" @input="saveSign"></yu-sign>
</template>

<script>
import yuSign from '@/components/yu-sign/index.vue'
export default {
  components: {
    yuSign
  },
  data() {
    return {
      imageUrl: ''
    };
  },
  
  methods: {
    // 签名前校验
    sighBforeValid() {
      // 判断是否进行协议阅读同意等
      return true;
    },
    saveSign(img) {
      console.log(img, 'img')
    }
  }
};
</script>

<template>
  <yu-area label="地址" regionCode="140109" @confirm="confirmArea" columnsNum="3"></yu-area>
<template>
<script>
  import yuArea from '@/components/yu-area/index.vue';
  export default {
    components: {
     yuArea
    },
    data() {
    },
    methods: {
      cancel() {
        // 取消
      },
      confirmArea(data) {
        console.log('选中的地址：', data.value, data.code);
      }
    },
  }
</script>

<template>
  <div>
    <yu-checkbox 
    label-width="80px" 
    label="担保方式" 
    v-model="checkboxValues1" 
    name="guarMtd" 
    data-code="TEST_TYPE" 
    ></yu-checkbox>
    <yu-checkbox 
    label-width="80px" 
    label="担保方式" 
    v-model="checkboxValues2" 
    name="guarMtd" 
    data-code="TEST_TYPE" 
    :excludeKey="'02,03'"
    ></yu-checkbox>
    <yu-checkbox 
    label-width="80px" 
    label="担保方式" 
    v-model="checkboxValues3" 
    name="guarMtd" 
    data-code="TEST_TYPE" 
    :details="true"
    ></yu-checkbox>
  </div>
<template>
<script>
  export default {
    data() {
      return {
        checkboxValues1: ['02'],
        checkboxValues2: ['01'],
        checkboxValues3: ['01', '04']
      };
    }
  }
</script>

<template>
  <yu-sms-field ref="smsField" smsCount="60" @getCode="getCodeFn" :smsSendNo="smsSendNo"></yu-sms-field>
<template>
<script>
  import yuSmsField from '@/components/yu-sms-field/index.vue';
  export default {
    components: {
     yuSmsField
    },
    data() {
      return: {
        smsSendNo: ''
      }
    },
    methods: {
      getCodeFn() {
      // todo:request 
      this.$refs.smsField.smsCountDown();
      this.$toast('短信验证码已发送至132****3126');
      this.smsSendNo = '3409'
      }
    },
  }
</script>

<template>
  <yu-floor-Com :pageNo="pageNo"></yu-floor-Com>
<template>
<script>
  import yuFloorCom from '@/components/floorCom/index.vue';
  export default {
    components: {
     yuFloorCom
    },
    data() {
      return: {
        pageNo: 'PM002' // 根据页面编号区分不同的页面
      }
    },
    methods: {
    },
  }
</script>

<template>
  <yu-ring :allAsset="allAsset"></yu-ring>
<template>
<script>
  import yuRing from '@/components/yu-ring/index.vue';
  export default {
    components: {
     yuRing
    },
    data() {
      return: {
        allAsset: '44000'
      }
    },
    methods: {
    },
  }
</script>

<template>
  <yu-pull-refresh-list ref="refHisList" :api="getHisList" :queryParams="doneQueryParams" @loaded="(list, total) => (listTotal = total)">
    <template #default="slotProps">
      <h5>{{ slotProps.item }}</h5>
    </template>
  </yu-pull-refresh-list>
<template>
<script>
import yuPullRefreshList from '@/components/yuPullRefreshList/index';
  export default {
    components: {
     yuPullRefreshList
    },
    data() {
      return: {
      }
    },
    methods: {
    },
  }
</script>

<template>
 <yu-grid :gridList="funList" :border="false" column-num="4"></yu-grid>
</template>
<script>
import yuGrid from '@/components/yu-grid/index';
 export default {
   components: {
    yuGrid
   },
   data() {
     return: {
     funList: [
       {
         name: '私人定制账户',
         key: '1',
         src: require('./assets/img/private.png'),
         link: 'private',
         modules: 'financial'
         bage: '推荐'
       },
       {
         name: '积分商城',
         key: '2',
         src: require('./assets/img/shop.png'),
         link: 'shop',
         modules: 'deposit'
       },
       {
         name: '排行榜',
         src: require('./assets/img/ranking.png'),
         link: 'ranking',
         key: '3',
         modules: 'foundation'
       },
       {
         key: '04',
         name: '慈善捐助',
         src: require('./assets/img/giving.png'),
         link: 'giving',
         modules: 'loan'
       },
       {
         key: '5',
         name: '资产配置',
         src: require('./assets/img/allocation.png'),
         link: 'allocation',
         checkAuth: false,
         modules: 'financial'
       },
       {
         key: '6',
         name: '咨询',
         src: require('./assets/img/info.png'),
         link: 'info',
         modules: 'loan'
       },
       {
         key: '7',
         name: '合格投资者',
         src: require('./assets/img/investors.png'),
         link: 'investors',
         modules: 'loan'
       },
       {
         key: '8',
         name: '合同签署',
         src: require('./assets/img/signing.png'),
         link: 'signing',
         modules: 'perCenter',
         bage: '1'
       }
     ]
     }
   },
   methods: {
   },
 }
</script>

<template>
  <yu-radio 
  label="风险等级"  
  label-width="100px" 
  v-model="risk" 
  data-code="RISKLEVEL" 
  :disabled="false" 
  :details="false" 
  required 
  :rules="[{ required: true, message: '请选择风险等级' }]" 
  placeholder="请选择"  
  @change="changeSelect"
  @input="changeInput"/>
<template>
<script>
  import yuRadio from '@/components/yu-radio/index.vue'
  export default {
    components: {
      yuRadio
    },
    data() {
      return {
        risk: '',
      };
    },
    methods: {
      changeSelect(val) {
        console.log('==changeSelect=======>', this.selectDate1)
      },
      changeInput(val) {
        console.log('==changeInput=======>', this.selectDate1)
      }
    }
  }
</script>

<template>
  <yu-select-picker 
  label="风险等级"  
  label-width="100px" 
  v-model="risk" 
  data-code="RISKLEVEL" 
  :disabled="false" 
  :details="false" 
  required 
  :rules="[{ required: true, message: '请选择风险等级' }]" 
  placeholder="请选择"  
  @change="changeSelect"
  @input="changeInput"/>
<template>
<script>
  import yuSelectPicker from '@/components/yu-select-picker/index.vue'
  export default {
    components: {
      yuSelectPicker
    },
    data() {
      return {
        risk: '',
      };
    },
    methods: {
      changeSelect(val) {
        console.log('==changeSelect=======>', this.selectDate1)
      },
      changeInput(val) {
        console.log('==changeInput=======>', this.selectDate1)
      }
    }
  }
</script>

<template>
  <yu-tab :tabs-list="tabDataList" :activeTab="activeTab" @changeIndex="changeIndex"></yu-tab>
</template>

<script>
import yuTab from '@/components/yu-tab/index.vue'
export default {
  components: {
    yuTab
  },
  data() {
    return {
      activeTab: 0,
      tabDataList: [
        {
          title: '合同信息',
          titleMore: '9'
        },
        {
          title: '保证信息'
        },
        {
          title: '抵押信息',
          titleMore: '5'
        },
        {
          title: '质押信息'
        }
      ]
    };
  },
  methods: {
    changeIndex(val) {
      console.log('changeIndex: ', val);
    }
  }
};
</script>

<template>
  <demo-section demoName="demo-checkbox">
    <demo-block :title="$t('basicUsage')">
      <yu-upload ref="refCommUpload" @refresh="refreshFn"></yu-upload>
      <div class="add-btn" @click="addFn">
        <p class="add-icon">+</p>
        <p class="add-text">上传资料</p>
      </div>
    </demo-block>
  </demo-section>
</template>

<script>
import demoBlock from '@/views/mbank/index/components/demoblock.vue'
import demoSection from '@/views/mbank/index/components/demoSection.vue'
import yuUpload from '@/components/yu-upload/index.vue'
export default {
  components: {
    demoSection,
    demoBlock,
    yuUpload
  },
  data() {
    return {
      currFileList: [],
      uploadParams: {},
      type: ''
    };
  },
  methods: {
    refreshFn(value) {
      // 重新请求服务器已上传文件列表，更新currFileList
      console.log('页面', value);
    },
    addFn() {
      this.$refs.refCommUpload.open();
    }
  }
};
</script>

<style lang="scss">
.add-btn {
    position: absolute;
    bottom: 109px;
    left: 50%;
    transform: translateX(-50%);
    width: 208px;
    height: 56px;
    line-height: 56px;
    font-size: 26px;
    color: #2877ff;
    font-weight: 400;
    background: rgba(216, 216, 216, 0);
    border: 1px solid rgba(40, 119, 255, 1);
    border-radius: 28px;
    .add-icon {
      float: left;
      margin-left: 10px;
      margin-right: 8px;
      font-size: 56px;
    }
    
  }
</style>