<template>
  <div>
    <bz-page title="身份鉴权">
      <div class="identityAuthentication">
        <div class="box">
          <!-- 人脸登录 -->
          <face-login v-if="loginType == 0"></face-login>
          <!-- 身份证登录 -->
          <idcard-login v-if="loginType == 1"></idcard-login>
          <!-- 二维码 -->
          <!-- <qrcode-login v-if="loginType == 2"></qrcode-login> -->
          <!-- 帐号密码 -->
          <!-- <account-login v-if="loginType == 3"></account-login> -->
          <!-- 证件号登录
          <certificate-login v-if="loginType == 4"></certificate-login> -->
          <div class="label-box">
            <div class="dashed-line"></div>
            <div class="title-label">其他登录方式</div>
            <div class="dashed-line"></div>
          </div>
          <div class="btn-box">
            <div class="change-btn" v-if="loginType != 0" @click="check(0)">
              <img
                class="btn-icon"
                src="../../assets/img/通用图/人脸识别.png"
                alt=""
              />
              <div class="btn-label">人脸识别登录</div>
            </div>
            <div class="change-btn" v-if="loginType != 1" @click="check(1)">
              <img
                class="btn-icon"
                src="../../assets/img/通用图/身份证登录.png"
                alt=""
              />
              <div class="btn-label">身份证登录</div>
            </div>
            <div class="change-btn" v-if="loginType != 4" @click="toPage('identityAuthentication/certificateLogin')">
              <img
                class="btn-icon"
                src="../../assets/img/通用图/证件号登录 2.png"
                alt=""
              />
              <div class="btn-label">证件号登录</div>
            </div>
          </div>
        </div>
      </div>
    </bz-page>
    <bz-disconnection v-if="isError"></bz-disconnection>
  </div>
</template>

2. 基础组件

说明

单一性基础性组件，比如说原生html中的input 、select等

例子

<bz-input size="small" placeholder="请输入案件编号、当事人、承办人搜索" class="right" v-model="value">
   <template v-slot:left-icon>
      <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
   </template>
</bz-input>

组件模式

1. 标签化组件

说明

使用.vue文件进行组件封装，其他页面通过import方式导入，通过标签化进行调用

例子

<bz-date-picker class="start" :startDate="today" v-model="today" ></bz-date-picker>

参数

props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    startDate: {
      type: String,
      default: "", //日期开始时间
    },
    endDate: {
      type: String,
      default: "", //日期结束时间
    },
},

方法

  methods: {
    // 绑定dom事件，点击空白处收起
    click() {
      const that = this;
      document.addEventListener("click", function (e) {
        if (that.$refs.datePicker) {
          if (!!that.$refs.datePicker.contains(e.target)) {
            that.isShow = !that.isShow;
          } else {
            that.isShow = false;
          }
        }
      });
    },
   //举例
    onchange(){
        this.$emit("onchange", 'test'); 
    }
  },

通信

组件外向组件内传值

vue中 :参数，语法
组件内向组件外传值
```
 this.$emit("onchange", 'test');
```

组件外部调用组件内部方法

<bz-date-picker class="start" :startDate="today" v-model="today" @onchange="onchange($event,1)"></bz-date-picker>

function onchange(val,val2){
   console.log(val,val2)
}

2. 事件驱动型组件

说明

通过点击事件或者某些操作才能触发的组件。

我们在开发中往往会遇到多个页面都需要用到同一个组件，而这些组件并不会在页面渲染后就直接展示在页面上，需要通过某些操作或者场景才会触发，而在以前我们往往会在每个页面进行引用，这样会导致很多冗余的代码，使用事件驱动型的思想来封装组件能让我们的代码更加优美，我们只有在需要用的时候才调用组件，而vue的原型方法就为我们提供了很好的途径。
原理

使用vue提供的render函数，将组件绑定在vue的原型上。

例子

 /*
    自定义 showModal 组件
    调用
    this.$showModal(obj);
    作者:pengpai
*/
 let _ShowModal = {
   show: false, // Boolean showModal显示状态
   component: null // Object showModal组件
 };
 import BzInput from "../input/bz-input.vue";
 import BzRadio from "../radio/bz-radio.vue";
 export default {

   install(Vue) {
     /*
         obj: Object
         type: String
     */
     const INITDATA = {
       title: '提示', //标题
       type: 'normal', //弹框类型  //默认为normal类型 custom为自定义类型
       template: '', //自定义插入的模板
       showCancel: true, //是否隐藏取消按钮
       showConfirm: true, //是否隐藏确定按钮
       confirmText: '确定', //确定按钮文字
       cancelText: '取消', //取消按钮文字
       countDown: 10, //倒计时
       init: function () {}, //组件初始化后的方法
       cancel: function () {}, //cancel按钮方法
       confirm: function () {}, //确认按钮的方法
     }
     Vue.prototype.$showModal = function (obj = {}) {

       if (_ShowModal.show) {
         return;
       }
       let ShowModalComponent = Vue.extend({
         //  引入可能需要用到的bz-input 组件
         components: {
           BzInput,
           BzRadio,
         },
         watch: {
           template(val) {
             console.log('变化了')
             obj.template = this.template;
           },
           countDown(val) {
             console.log(val);
           },
         },
         data: function () {
           return {
             show: _ShowModal.show,
             value: '',
             countDown: obj.countDown,
             template: obj.template,
           }
         },
         mounted() {},
         created() {
           //初始化
           this.value = obj.value ? obj.value : '';
           if (obj.init !== undefined) {
             obj.init();
           }
         },
         methods: {
           init() {
             obj.init();
           },
           confirm() {
             obj.confirm();
             this.close();
           },
           cancel() {
             obj.cancel();
             this.close();
           },
           close() {
             _ShowModal.component.show = _ShowModal.show = false;
             document.body.removeChild(element);
           }
         },
         template: `<div v-show="show" class="modal-container">
              <div class="modal-box">
               <div class="modal-top" v-show="${obj.type!='custom'}">
                <div  class="modal-title">${obj.title?obj.title:INITDATA.title}</div>
               </div>
               <div  class="modal-slot" v-show="${obj.type=='custom'}">
                ${obj.template}
               </div>
               <div :class="['modal-bottom',${obj.showConfirm||obj.showCancel}?'top-border':'' ]" >
               <button v-show="${obj.showCancel }" @click.stop="cancel" class="cancel-btn">${obj.cancelText?obj.cancelText:INITDATA.cancelText}</button>
                <button v-show="${obj.showConfirm }" class="confirm-btn" @click.stop="confirm">${obj.confirmText?obj.confirmText:INITDATA.confirmText}</button>
               </div>
              </div>
            
            </div>`
       });
       _ShowModal.component = new ShowModalComponent();
       let element = _ShowModal.component.$mount().$el;
       document.body.appendChild(element);
       _ShowModal.component.show = _ShowModal.show = true;
       //  console.log(_ShowModal.component)

       //获取组件内的属性
       Vue.prototype.$showModal['getValue'] = function (key) {
         return _ShowModal.component[key];
       }
       //设置属性内的属性
       Vue.prototype.$showModal['setValue'] = function (key, value) {
         _ShowModal.component[key] = value;
       }
       //关闭弹框
       Vue.prototype.$showModal['close'] = function () {
         _ShowModal.component.close();
       }

     };

   }
 }

参数

 const INITDATA = {
       title: '提示', //标题
       type: 'normal', //弹框类型  //默认为normal类型 custom为自定义类型
       template: '', //自定义插入的模板
       showCancel: true, //是否隐藏取消按钮
       showConfirm: true, //是否隐藏确定按钮
       confirmText: '确定', //确定按钮文字
       cancelText: '取消', //取消按钮文字
       countDown: 10, //倒计时
       init: function () {}, //组件初始化后的方法
       cancel: function () {}, //cancel按钮方法
       confirm: function () {}, //确认按钮的方法
 }

方法

组件内方法

methods: {
    init() {
        obj.init();
     },
    confirm() {
        obj.confirm();
        this.close();
     },
    cancel() {
        obj.cancel();
        this.close();
     },
    close() {
        _ShowModal.component.show = _ShowModal.show = false;
         document.body.removeChild(element);
     }
 },

组件外方法

//获取组件内的属性
  Vue.prototype.$showModal['getValue'] = function (key) {
     return _ShowModal.component[key];
  }
//设置属性内的属性
  Vue.prototype.$showModal['setValue'] = function (key, value) {
     _ShowModal.component[key] = value;
  }
//关闭弹框
  Vue.prototype.$showModal['close'] = function () {
     _ShowModal.component.close();
  }

使用

首先在vue项目入口文件main.js中引用

// modal
import(`./components/showModal/index${window.screen.width}&${window.screen.height}.css`)
// import './components/showModal/index.css';
import ShowModal from './components/showModal/index.js';
Vue.use(ShowModal);

在vue中如下使用

const that = this;
      this.$showModal({
        title: "123",
        type: "custom",
        showCancel: false,
        showConfirm: true,
        confirmText: "退出系统",
        cancelText: "继续使用",
        countDown: this.countDown,
        template: `
               <div style="width:128px;height:128px;margin-top:16px;background:url(${require("../../assets/img/诉费缴纳/二维码框.png")})"></div>
<div style="margin-top:8px;display:flex;flex-direction: row;align-items:center;    font-family: SourceHanSansCN-Regular;
           font-size: 24px;
            font-weight: normal;
               font-stretch: normal;
          line-height:24px;
       letter-spacing: 1px;
          color: #333333;">
        <span>请用</span>
        <img class="icon" src="${require("../../assets/img/诉费缴纳/微信.png")}" alt="" />
        <span>或</span>
        <img class="icon" src="${require("../../assets/img/诉费缴纳/支付宝.png")}"alt="" />
            <span>扫码支付</span>
        </div> 
        <div style="">
        <span id="time" style="font-family: SourceHanSansCN-Regular;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3c62fb;"
  >{{countDown}}</span>
        <span style="    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #333333;"> 秒后 </span>
        <span style="    font-family: SourceHanSansCN-Medium;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #3c62fb;">退出系统</span>
  
        </div>
              <div style="font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24x;
    letter-spacing: 0px;
    color: #333333;">
        <span >缴费结果请在</span>
        <span style="    font-family: SourceHanSansCN-Medium;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #3c62fb;"> 已缴费 </span>
        <span >中查看</span>
        </div>
        `,
        init: function () {
          that.countDowner = setInterval(() => {
            that.countDown--;
            that.$showModal.setValue("countDown", that.countDown);
            if (that.countDown == 0) {
              that.$showModal.close();
              that.countDown = 10;
              clearInterval(that.countDowner);
            }
          }, 1000);
        },
        confirm: function () {
          console.log("成功！！");
          clearInterval(that.countDowner);
          that.countDown = 10;
        },
        cancel: function () {
          console.log("失败！！");
          clearInterval(that.countDowner);
          that.countDown = 10;
        },
      });

通信

单向通信

  this.$showModal(obj)//obj是向组件传入的参数

双向通信（实现双向绑定）

组件内向组件外传值

this.$showModal.getValue(key)//key指的是获取组件的某一个定义的变量

组件外向组件内传值

this.$showModal.setValue(key,value)//key指的是组件内的参数名，value指的是给key设置的值

组件封装

1. 标签化组件封装

命名

bz+组件的功能，例如bz-input
方法

具体方法参考vue官方网站的说明, https://cn.vuejs.org/v2/guide/components-registration.html

在这里就不一一说明了。

2. 数据驱动型组件封装

命名

因为组件通过js来调用所以，通常使用组件的功能命名，如遇到多单词，使用驼峰命名，例如showToast
参数
- 内部参数
  
  内部参数与标签化组件的初始化data一样
- 外部参数
  
  一般通过组件内部的INITDATA来传值
方法
- 内部方法
  
  写在methods里面，这里和标签化组件的使用一样
- 外部方法
  
  通过Vue.prototype.$+组件名+[方法名] = function () { }
  
  如我要实现showModal中一个close的方法
```
Vue.prototype.$showModal['close'] = function () {
  //执行。。。
}   
```
- 组件目录
  
  showModal
  - index.js ------------------------------------组件主要的逻辑写在这里
  - index.css ------------------------------------组件样式写在这里
  - img -------------------------------------可能需要引用的icon或者图片放在这里
  - js -------------------------------------可能需要引用的js文件放这个文件夹

UI

1.输入框 bz-input

使用

      <bz-input
        size="small"
        placeholder="请输入案件编号、承办人、当事人搜索"
        class="search"
        v-model="value"
      >
        <template v-slot:left-icon>
          <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
        </template>
      </bz-input>

属性

属性	类型	默认值	说明
type	String	text	同原生input的type
placeholder	String	请输入	同原生input的placeholder
maxlength	String	无	最大长度（string的数字）
keyBoard	Boolean	false	是否开启键盘
clear	Boolean	false	是否展示清除按钮
model	String	""	input绑定值
size	String	""	input的大小
rule	Object	{}	isError-获得焦点时,isFocus-失去焦点时, icon-是否显示icon,label-错误提示
keyBoardType	String	""	keyBoardType在keyBoard为true的时候才会起作用，1.number
isDisabled	Boolean	false	input是否禁用
left	Boolean	false	左边插入文字，即将弃用，推荐slot插槽用法
right	Boolean	false	右边插入文字，即将弃用，推荐slot插槽用法
slot	Template	-	目前有两个插槽：1.left-icon，input左边插槽，2.right-icon，input右边插槽

2.下拉框 bz-select

使用

<bz-select placeholder="请选择" @change="change" v-model="yg" size="mini" ref="yg" :disabled="value == 'bg'"></bz-select>

后续版本可能会重新设计select的模式，采取原生html的设计模式

<bz-select v-model="value">
    <bz-option :label="label" :value="value">label</bz-option>
</bz-select>

属性

属性	类型	默认值	说明
placeholder	String	""	占位符
size	String	需要重新整理	select尺寸
array	Array	[]	下拉框展示的数据
arrayKey	String	""	下拉框展示的数据的key值
model	String	""	下拉框选择的值
type	String	""	//date 年份 //caseType案件类型
disabled	Boolean	false	是否禁用

方法

方法名作用回调

change 监听用户点击下拉框选项返回name字段值

方法名	作用	回调
change	监听用户点击下拉框选项	返回name字段值

3.图片查看 bz-image

使用

<bz-image class="img-box" :src="imgList" :obj="obj"></bz-image>

属性

属性类型默认值说明

src Array [] 图片的数组

obj Object {value1:'',value2:'',value3:''} 图片长宽以及旋转后的大小
事件

属性	类型	默认值	说明
src	Array	[]	图片的数组
obj	Object	{value1:'',value2:'',value3:''}	图片长宽以及旋转后的大小

4.单选框 bz-radio

使用

<bz-radio class="radio-left" v-model="sendType" label="0">在线送达</bz-radio

属性

属性类型默认值说明

model String,Number "" 选中的值

label String,Number "" 选中的label

slot Template - 插槽内容
方法

方法名作用回调

change 监听用户切换选项选中的value值

属性	类型	默认值	说明
model	String,Number	""	选中的值
label	String,Number	""	选中的label
slot	Template	-	插槽内容

方法名	作用	回调
change	监听用户切换选项	选中的value值

5.气泡 bz-bubble

使用

<bz-bubble :text="item.yg" :width="390">
    <div class="value-more">{{ item.yg ? item.yg : "—" }}</div>
</bz-bubble>

属性

属性类型默认值说明

text String,Number "" 气泡展示的内容

width Number - 文字最大的宽度

slot Template - 显示的内容
方法

属性	类型	默认值	说明
text	String,Number	""	气泡展示的内容
width	Number	-	文字最大的宽度
slot	Template	-	显示的内容

6.按钮 bz-button

使用

<bz-button size="medium" type="success" class="confirm" @click="toPage">清除数据</bz-button>

属性

属性类型默认值说明

type String "" button的风格，1.success2.normal

size String medium button的大小，1.small2.medium

disabled Boolean false 是否是禁用状态
方法

属性	类型	默认值	说明
type	String	""	button的风格，1.success2.normal
size	String	medium	button的大小，1.small2.medium
disabled	Boolean	false	是否是禁用状态

7.多级下拉框 bz-cascader

使用

<bz-cascader class="cascader" :data="courtInfo" v-model="court"></bz-cascader>

属性

属性类型默认值说明

placeholder String 请选择占位符

data Array [] 下拉框绑定的数据

model String '' 选中的值
方法

方法名作用回调

change 监听用户选择操作返回选中的值

属性	类型	默认值	说明
placeholder	String	请选择	占位符
data	Array	[]	下拉框绑定的数据
model	String	''	选中的值

方法名	作用	回调
change	监听用户选择操作	返回选中的值

8.多选框 bz-checkbox

使用

<bz-checkbox class="checkbox" :label="items.answer" v-model="items.isCheck"></bz-checkbox>

属性

属性类型默认值说明

value Boolean false 当前选项是否被选中

label String, Number - 选项绑定的值

slot template - 当前选项的插槽
方法

方法名作用回调

change 监听用户选择操作返回选中的值

属性	类型	默认值	说明
value	Boolean	false	当前选项是否被选中
label	String, Number	-	选项绑定的值
slot	template	-	当前选项的插槽

方法名	作用	回调
change	监听用户选择操作	返回选中的值

9.日期选择框 bz-datePicker

使用

<bz-date-picker class="start" :startDate="today" v-model="today"></bz-date-picker>

属性

属性	类型	默认值	说明
value	String	""	选择的日期值
placeholder	String	请选择	占位符
startDate	String	-	日期组件开始的日期
endDate	String	-	日期组件结束的日期

后续版本可能会新增支持输出日期格式的设定，例如时间戳、yyyy-MM-dd

方法

方法名作用回调

change 监听用户选择日期操作返回选中的日期

方法名	作用	回调
change	监听用户选择日期操作	返回选中的日期

10.窗口 bz-page

使用

<bz-page title="电子阅卷" :other="'(' + dataInfo.length + ')'" isBack></bz-page>

属性

属性	类型	默认值	说明
isBack	Boolean	false	是否有返回按钮
isClose	Boolean	true	是否有关闭按钮
title	String	""	页面标题
other	String	""	页面标题辅助字段
return	Function	-	返回按钮绑定的事件
close	Function	-	关闭按钮绑定的事件
main-slot	Template	-	主要内容的插槽
slot	Template	-	1.name为left左边插槽，2.name为right右边插槽
~~slot~~	~~Template~~	-	~~无数据的空白页，即将废弃，后续会调整为数据驱动型组件~~

方法

11.滚动列表 bz-scrollBox

使用

<bz-scroll-box class="info-box"></bz-scroll-box>

属性

属性类型默认值说明

slot template - 插槽
方法

方法名作用回调

onScroll 监听用户滚动操作滚动事件参数

属性	类型	默认值	说明
slot	template	-	插槽

方法名	作用	回调
onScroll	监听用户滚动操作	滚动事件参数

12.文本域 bz-textarea

使用

<bz-textarea class="textarea" placeholder="请输入现住地" :statistics="false" v-model="item.Address"></bz-textarea>

属性

属性	类型	默认值	说明
model	String，Number	-	文本域的值
placeholder	String	-	文本域占位符
statistics	Boolean	true	是否展示文本域输入的长度统计
total	String，Number	140	文本域最大长度限制

方法

13.进度条 bz-progress

使用

<bz-progress class="progress" :val="activeIndex + 1" :total="dataInfo.length"></bz-progress>

属性

属性	类型	默认值	说明
val	Number	1	进度条占总长度的份数
total	Number	1	总份数
length	Number	426	进度条的总宽度
boxColor	String（color）	rgba(145, 167, 255, 0.5)	进度条的底色
blockColor	String（color）	#3c62fb	进度条的颜色

方法

API

1.加载框 $loading

使用
```
this.$loading.show()
```
属性
方法

方法名作用回调

show 显示加载动画 -

hide 关闭加载动画 -

方法名	作用	回调
show	显示加载动画	-
hide	关闭加载动画	-

2.模态弹框$showModal

使用
```
this.$showModal()
```

属性

属性	类型	默认值	说明
title	String	""	标题
type	String	normal	弹框类型默认为normal类型 custom为自定义类型
template	Template	-	自定义插入的html片段
showCancel	Boolean	true	是否隐藏取消按钮
showConfirm	Boolean	true	是否隐藏确定按钮
confirmText	String	""	确定按钮文字
cancelText	String	""	取消按钮文字
init	Function	-	组件初始化后的方法
cancel	Function	-	cancel按钮绑定的方法
confirm	Function	-	confirm按钮绑定的方法

方法

方法名作用回调

getValue 获取组件内部字段名为key的值返回传入key字段名的值

setValue 设置组件内部的字段名为key值 -

close 关闭/销毁组件 -

方法名	作用	回调
getValue	获取组件内部字段名为key的值	返回传入key字段名的值
setValue	设置组件内部的字段名为key值	-
close	关闭/销毁组件	-

3.消息提示$showToast

使用
```
this.$showToast('提示')
```
属性

属性类型默认值说明

text String 提示消息提示的内容

time Number 3000（毫秒）消息提示消失的时间
方法

属性	类型	默认值	说明
text	String	提示	消息提示的内容
time	Number	3000（毫秒）	消息提示消失的时间

4.预览$preview

使用
```
that.$preview({});
```

属性

属性	类型	默认值	说明
type	String	image	预览的类型
array	Array	-	预览的数据
index	Number	0	预览数据显示的索引
isDelete	Boolean	-	是否显示删除按钮
isPrint	Boolean	-	是否显示打印按钮

方法

版本更新规则：

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号：当你做了不兼容的 API 修改，次版本号：当你做了向下兼容的功能性新增，修订号：当你做了向下兼容的问题修正。

例如：我原本的项目是1.0.0版本的话若是1中情况，变为1.0.1 若是2中情况，变为1.1.0 若是3中情况，变为2.0.0

通过npm version 自动改变版本 update_type为patch, minor, or major其中之一，分别表示补丁，小改，大改。

Keywords

bzfar