helin3 98b1b8cf37 git init.		il y a 4 mois
..
README copy.html	98b1b8cf37 git init.	il y a 4 mois
index.html	98b1b8cf37 git init.	il y a 4 mois
yuarea.html	98b1b8cf37 git init.	il y a 4 mois
yucheckbox.html	98b1b8cf37 git init.	il y a 4 mois
yuchoosebankcard.html	98b1b8cf37 git init.	il y a 4 mois
yudatepicker.html	98b1b8cf37 git init.	il y a 4 mois
yudoublerecord.html	98b1b8cf37 git init.	il y a 4 mois
yufloorcom.html	98b1b8cf37 git init.	il y a 4 mois
yugrid.html	98b1b8cf37 git init.	il y a 4 mois
yuimgswiper.html	98b1b8cf37 git init.	il y a 4 mois
yuinputmoney.html	98b1b8cf37 git init.	il y a 4 mois
yuinputnum.html	98b1b8cf37 git init.	il y a 4 mois
yuocr.html	98b1b8cf37 git init.	il y a 4 mois
yupasswordinput.html	98b1b8cf37 git init.	il y a 4 mois
yupay.html	98b1b8cf37 git init.	il y a 4 mois
yupdf.html	98b1b8cf37 git init.	il y a 4 mois
yupullrefreshlist.html	98b1b8cf37 git init.	il y a 4 mois
yuradio.html	98b1b8cf37 git init.	il y a 4 mois
yuring.html	98b1b8cf37 git init.	il y a 4 mois
yusearch.html	98b1b8cf37 git init.	il y a 4 mois
yuselectpicker.html	98b1b8cf37 git init.	il y a 4 mois
yusign.html	98b1b8cf37 git init.	il y a 4 mois
yusmsfield.html	98b1b8cf37 git init.	il y a 4 mois
yusvgicon.html	98b1b8cf37 git init.	il y a 4 mois
yutab.html	98b1b8cf37 git init.	il y a 4 mois
yuupload.html	98b1b8cf37 git init.	il y a 4 mois

组件组件

H5-API H5-API

APP-SDK

云打包
(opens new window)

# 业务组件

WARNING

业务组件基于vant-ui基础组件二次封装，脚手架中未全局注册，使用时需遵循按需导入原则，从工程目录/src/component下导入组件,功能仅做示例操作，组件源码提供，可自定义扩展修改。

# yuSearch 实时搜索组件

实时搜索查询组件,实现边搜索边查询，包含防抖或节流实现

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
placeholder	搜索框提示	string	-	请输入搜索关键字
val	所搜框的默认值	string	-	-
delay	延迟搜索时间，单位毫秒	string	-	2000
delayType	延迟搜索类型，节流、防抖	string	debounce-防抖，throttle-节流	debounce

# Events

方法名	说明	参数
search	查询回调触发	value 当前搜索框的值
blur	查询框失去焦点	value 当前搜索框的值

# yuPay 付款组件

付款组件，点击付款的底部弹出框，通常与yuPasswordInput密码输入组件、yuChooseBankcard银行卡选择组件搭配使用

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
payShow	显示弹出层	Boolean	true false	false
bankName	付款标题	string	-	付款
bankNum	付款金额	string	-	-
money	付款金额	string	-	-
title	付款标题	string	-	付款
banklogo	付款账户银行logo	png svg 等	-	-
comfirmText	提交按钮文字	string	-	确定

# Events

方法名	说明	参数
comfirm	确定付款按钮触发
changePay	切换付款账户
close	关闭弹出框

# yuPdf pdf预览组件

pdf文件预览组件，支持在线pdf预览等，纯h5实现，不依赖原生

# 效果预览

依赖插件安装：

yarn add pdfh5

yarn add canvas@2.8.0 --ignore-scripts

yarn add dommatrix

yarn add web-streams-polyfill

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

# Attributes

参数	说明	类型	可选值	默认值
pdfUrl	pdf文件地址，支持在线与本地	string	-	-
height	pdf展示窗口高度	string（100%/200px）	-	-
width	pdf展示窗口宽度	string（100%/200px）	-	-

# yuPasswordInput 组件

密码输入组件，弹出框形式。

# 效果预览

基础示例

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

# Attributes

参数	说明	类型	可选值	默认值
type	弹出框场景类型	String	transfer simple complex	transfer
passwordShow	是否显示弹出框	Boolean	false true	false
title	标题	String	-	请输入取款密码
subTitle	小标题type="complex"时有效	String	-	-
errorInfo	错误提示信息	String	-	-
actName	账户名称type="complex"时有效	String	-	-
money	转账金额type="transfer"时有效	String	-	-
payAct	转账付款账户type="transfer"时有效	String	-	-
receiveName	收款名称 type="transfer"时有效	String	-	-
receiveBank	收款行type="transfer"时且receiveName不为空时有效	String	-	-
receiveNum	收款账号type="transfer"时有效	String	-	-
randomKeyOrder	是否开启随机数键盘	Boolean	true false	true
pwdLength	密码长度	String	-	6
isValidate	是否开启密码校验，默认包含长度校验、非空校验 type="simple"时无效	Boolean	true false	true

# Events

方法名	说明	参数
input	键盘输入事件	输入的值
delete	键盘删除事件	当前剩余密码值
focus	键盘聚焦事件	-
confirm	确定按钮点击事件	当前输入的密码值
cancel	单击右上角关闭图标点击确认取消回调事件	-

# yuInputMoney 组件

金额输入组件：支持表单项和其他两种展示方式、支持自动格式化金额、支持银行名称logo定制、支持单位自动显示

# 效果预览

1.表单形式

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

2.金额输入形式

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

# Attributes

参数	说明	类型	可选值	默认值
label	左侧标签	String	-	金额 ¥
placeholder	输入框占位	String	-	请输入
title	键盘名称	String	-	宇信银行
disabled	是否禁用	boolean	true、false	false
showunit	是否显示计数单位,最大显示到百亿	boolean	true、false	true
maxlength	密码键盘最大输入长度	Number	-	11
isFormItem	是否显示为表单项形式	boolean	true、false	false
bankNo	银行行号用于反显银行卡logo,键盘左下角银行logo,src/assets/img/banklogo目录下可查看logo图标，文件名即为行号	String	-	yubanktest

# Events

方法名	说明	参数
input	输入框 input 事件	输入的值

# yuInputNum 数值输入组件

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定value值	String	-	-
label	左侧标签	String	-	-
label-width	标题宽度	string（px）	-	-
placeholder	输入框占位	String	-	-
details	是否是详情反显，不可点击，正常色	Bool	true/false	-
disabled	是否禁用	boolean	true、false	-
required	选项框是否必输	Bool	true/false	-
rules	选项框校验规则	Array	-	-
maxLength	密码键盘最大输入长度	Number	-	16
numType	类型 digit-正整数 number-数字 money-金额(千分位金额格式化)	String	-	-
unit	单位	string	-	-
multiple	放大倍数	number	-	-

# Events

方法名	说明	参数
input	输入框 input 事件	输入的值
focus	输入框 focus 事件	组件对象
blur	输入框 input 事件	组件对象

# yuOcr 依赖原生的ocr输入框

依赖原生提供的ocr能力，封装的ocr输入框，目前支持身份证识别、银行卡识别，可在此基础上扩展

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定值，识别结果	string	-	-
label	标题	String	-	-
label-width	标题宽度	string（px）	-	-
disabled	是否不可编辑，暗色	Bool	true/false	-
details	是否是详情反显，不可点击，正常色	Bool	true/false	-
placeholder	选项框placeholder	string	-	-
required	选项框是否必输	Bool	true/false	-
rules	选项框校验规则	Array	-	-
idType	识别证件类型	string(目前支持2和4，主要是回调数据差异，其他类型可自行扩展)	'0': '通用文字识别' '1': '身份证识别' '2': '身份证正面识别' '3': '身份证背面识别' '4': '银行卡识别' '5': '网络图片识别' '6': '驾驶证证识别' '7': '行驶证识别' '8': '车牌识别' '9': '营业执照识别' '10': '票据识别'	-

# Events

方法名	说明	参数
change	识别结果输出

# yuChooseBankcard 选择银行卡

封装选择银行卡组件

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
show	显示选择页面	Boolean	true false	false
title	标题	String	-	选择账号
cancelTxt	取消按钮文字	string	-	取消
confirmTxt	确定按钮文字	string	-	确定
cardList	付款信息列表，{accountNo:'账号', bankNo: '行号'}	string	-	-
checkedData	选中的账号信息{accountNo:'账号', bankNo: '行号'}, 用于反显选中状态	Object	-	-
needAdd	是否需要添加新卡按钮	Boolean	true false	true

# Events

方法名	说明	参数
comfirm	确定付款按钮触发	(index, item), 账户列表索引，账户信息
cancel	取消按钮触发
check	选中账户触发	(index, item), 账户列表索引，账户信息
addCard	添加新卡	-

# yuDatePicker 时间选择器

# 效果预览

选择日期

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定值	string(2024-04-10 00:00:02)/Date	-	-
label	标题	String	-	-
label-width	标题宽度	string（px）	-	-
disabled	是否不可编辑，暗色	Bool	true/false	-
details	是否是详情反显，不可点击，正常色	Bool	true/false	-
placeholder	选项框placeholder	string	-	-
right-icon	选项框右侧图标名	string	支持vant图标库（icon）设置	-
required	选项框是否必输	Bool	true/false	-
rules	选项框校验规则	Array	-	-
format	日期格式化	string	yyyy年MM月dd日/yyyy-MM-dd。。。	-
minDate	选择器最小时间	Date	-	-
maxDate	选择器最大时间	Date	-	-
readonly	是否只读，只可选中查看，不可切换日期	Bool	true/false	-
maxDate	选择器最大时间	Date	-	-

# 方法

方法名	说明	参数
changeSelect	选择切换回调
changeInput	选择切换回调

# yuDoubleRecord 视频双录

依赖原生提供的能力，封装的视频双录

# 效果预览

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

# Attributes

# Events

方法名	说明	参数
recordResult	双录结果输出

# yuSvgIcon 图标组件

图标组件,直接配置svg图标文件名称(src\assets\icons下的图标文件名或src\views\mbank\模块名\assets\icons下的图标文件名)即可应用图标，此组件已经全局注册无需再页面单独注册。

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
type	图标名称src\assets\icons下的图标文件名或src\views\mbank\模块名\assets\icons下的图标文件名	String	-	-
className	图标自定义类名	String	-	-

# yuImgSwiper 图片轮播

图片轮播组件，图片懒加载

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
images	图片数组	Array	-	-

# yuSignCanvas 手写签名组件

手写签名，签名结果为图片base64格式

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

# Attributes

参数	说明	类型	可选值	默认值
title	签名标题	string	-	请签名
saveBtnTxt	保存按钮文字	string	-	保存
clearBtnTxt	清空按钮文字	string	-	清空

# Events

方法名	说明	参数
clear	清空按钮触发	-
saveSign	保存按钮触发	{signData: ''}

# yuSign 手写电子签名组件

手写签名，签名结果为图片base64格式,对yuSignCanvas的二次封装

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定值（签名结果图片）	base64字符串	-	-
title	标题	String	-	-
beforeValid	打开签名弹窗前的验证方法	Function	-	-

# 方法

方法名	说明	参数
@input	保存按钮触发，签名结果更新

# yuArea 地区级联选择器

WARNING

组件默认从public/plugins/Area.min.js中加载全部省市区数据，本地开发环境需要在.env.development环境配置文件中VUE_APP_COMM_RES_SRC变量配置为终端服务地址，生产环境中，数据默认从公共资源包中加载。

# 效果预览

# 选择省市区

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

# Attributes

参数	说明	类型	可选值	默认值
regionCode	地区码前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000	string	-	-
label	标题	String	-	-
title	选择器标题	string	-	地区
placeholder	选择器提示描述	string	-	请选择
cancelBtntext	取消按钮文字	string	-	取消
confirmBtntext	确定按钮文字	string	-	确定

# events

方法名	说明	参数
confirm	确定按钮触发	{code: '', value: ''}
cancel	取消按钮触发	-

# yuCheckbox 复选框

复选框选择器，支持数据字典码传入，自动加载数据字典数据源

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
label-width	左侧标题栏宽度	string(px)	-	-
label	标题	String	-	-
v-model	当前选中值	string	[]	-
data-code	数据源字典码	string	[]	-
excludeKey	数据源中排除项	string(逗号分割)	-	-
details	是否是详情反选不可修改状态	bool	-	-

# yuSmsField 短信验证组件

TIP

组件自带验证码倒计时功能，通过当前系统时间为维度进行动态计算时间差, 解决iOS或安卓切换后台,js进程被挂起,倒计时中止的问题。

短信验证组件,倒计时

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
label	标题	String	-	短信验证码
smsCount	倒计时时间长度	string	-	60
placeholder	输入框提示	string	-	请输入短信验证码
isSmsSendNo	是否显示短信序列号	Boolean	-	true
smsSendNo	短信验证序列号	String	-	-
btnTxt	输入域右侧按钮文字内容	String	-	获取

# events

方法名	说明	参数
getCode	点击右侧按钮触发事件

# methods

方法名	说明	参数
smsCountDown	开启倒计时	-

# yuFloorCom 千人千面组件

TIP

千人千面组件，可动态渲染页面，根据接口返回数据，渲染对应的页面组件，脚手架中接口数据通过MOCK模拟,组件默认渲染MOCK数据，页面编号非必填，项目中需要根据实际情况从接口中获取对应数据.

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

# Attributes

参数	说明	类型	可选值	默认值
pageNo	页面编号	String	-	-

# yuRing 环形组件

TIP

环形组件，可用于展示环形资产动画。

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
allAsset	总资产	String	-	-

# yuPullRefreshList 下拉刷新上拉加载组件

TIP

yuPullRefreshList，可用于列表查询页面，将列表内容以插槽的形式嵌入组件，实现下拉的时触发刷新，上拉时触发加载更多数据。

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
api	列表接口	String	-	-
queryParams	列表固定查询参数	Object	-	-
page	起始页	Number	-	1
size	没有加载的数据	Number	-	10
defaultLoad	是否默认加载数据	Boolean	-	true

# events

方法名	说明	参数
loaded	列表加载完成时间	resData-列表请求数据, total-列表数据数据

# slot

名称	说明	参数
default	默认插槽	-

# yuGrid 宫格业务

宫格组件，可用于配置移动应用金刚区菜单，支持图标、文字等自定义、支持权限控制。

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
isActive	是否有激活样式	Boolean	true,false	false
columnNum	宫格列数	String	-	4
border	是否有边框	Boolean	-	false
isPermission	是否开启权限控制	Boolean	true,false	false
gridList	宫格数据列表,详细配置见下表	Object	-	-

# gridList 配置项说明

参数	说明	类型	可选值	默认值
name	宫格菜单名称	String	-	-
key	宫格菜单key	String	-	-
type	宫格菜单图标名	String	-	-
link	宫格菜单跳转路由	String	-	-
modules	宫格菜单跳转模块名称，若为当前模块则不需要配置	String	-	-
permissionId	宫格菜单权限控制ID，需开启权限控制isPermission时生效，配合后台接口权限数据才能生效	String	-	-

# events

方法名	说明	参数
clickFn	点击宫格菜单时触发	data,当前宫格菜单项信息

# yuRadio 单选tag

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定值	string(2024-04-10 00:00:02)/Date	-	-
label	标题	String	-	-
label-width	标题宽度	string（px）	-	-
disabled	是否不可编辑，暗色	Bool	true/false	-
details	是否是详情反显，不可点击，正常色	Bool	true/false	-
placeholder	选项框placeholder	string	-	-
required	选项框是否必输	Bool	true/false	-
rules	选项框校验规则	Array	-	-
excludeKey	数据源中排除项	string(逗号分割)	-	-
data-code	数据源字典码	string	[]	-
options	数据源，如果传入此参数，data-code不生效	Array	[]	-

# 方法

方法名	说明	参数
changeSelect	选择切换回调
changeInput	选择切换回调

# yuSelectPicker 下拉选择器

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
v-model	双向绑定值	string(2024-04-10 00:00:02)/Date	-	-
label	标题	String	-	-
label-width	标题宽度	string（px）	-	-
disabled	是否不可编辑，暗色	Bool	true/false	-
details	是否是详情反显，不可点击，正常色	Bool	true/false	-
placeholder	选项框placeholder	string	-	-
required	选项框是否必输	Bool	true/false	-
rules	选项框校验规则	Array	-	-
excludeKey	数据源中排除项	string(逗号分割)	-	-
data-code	数据源字典码	string	[]	-
options	数据源，如果传入此参数，data-code不生效	Array	[]	-

# 方法

方法名	说明	参数
changeSelect	选择切换回调
changeInput	选择切换回调

# yuTab tab选项组件

# 效果预览

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

# Attributes

参数	说明	类型	可选值	默认值
tabs-list	选项栏数据源	Array：title-标题，titleMore-标题副值，一般为数量统计等	-	-
activeTab	当前选中tab索引	Number	-	-

# 方法

方法名	说明	参数
@changeIndex	选中tab变化回调

# yuUpload 文件选择上传组件

# 效果预览


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

Last Updated: 5/15/2024, 4:47:26 PM

README copy.html

# 业务组件

# yuSearch 实时搜索组件

# 效果预览

# Attributes

# Events

# yuPay 付款组件

# 效果预览

# Attributes

# Events

# yuPdf pdf预览组件

# 效果预览

# Attributes

# yuPasswordInput 组件

# 效果预览

# Attributes

# Events

# yuInputMoney 组件

# 效果预览

# Attributes

# Events

# yuInputNum 数值输入组件

# 效果预览

# Attributes

# Events

# yuOcr 依赖原生的ocr输入框

# 效果预览

# Attributes

# Events

# yuChooseBankcard 选择银行卡

# 效果预览

# Attributes

# Events

# yuDatePicker 时间选择器

# 效果预览

# Attributes

# 方法

# yuDoubleRecord 视频双录

# 效果预览

# Attributes

# Events

# yuSvgIcon 图标组件

# 效果预览

# Attributes

# yuImgSwiper 图片轮播

# 效果预览

# Attributes

# yuSignCanvas 手写签名组件

# Attributes

# Events

# yuSign 手写电子签名组件

# 效果预览

# Attributes

# 方法

# yuArea 地区级联选择器

# 效果预览

# 选择省市区

# Attributes

# events

# yuCheckbox 复选框

# 效果预览

# Attributes

# yuSmsField 短信验证组件

# 效果预览

# Attributes

# events

# methods

# yuFloorCom 千人千面组件

# Attributes

# yuRing 环形组件

# 效果预览

# Attributes

# yuPullRefreshList 下拉刷新上拉加载组件

# 效果预览

# Attributes

# events

# slot

# yuGrid 宫格业务

# 效果预览

# Attributes