Skip to content

GitLab

Commit 8f7acb3f authored by kang.nie@inzymeits.com's avatar kang.nie@inzymeits.com
Browse files

初始化代码

parent 2d7d3f82
Pipeline #3104 failed with stages
in 0 seconds
Hide whitespace changes
Inline Side-by-side
src/assets/rnr/ico_scan.svg 0 → 100644
View file @ 8f7acb3f
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_扫描</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="车辆信息-添加" transform="translate(-664.000000, -608.000000)">
<g id="编组-2" transform="translate(56.000000, 600.000000)">
<g id="icon_扫描" transform="translate(608.000000, 8.000000)">
<path d="M9,2 L3.4,2 C2.626801,2 2,2.626801 2,3.4 L2,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9,28 L3.4,28 C2.626801,28 2,27.37322 2,26.6 L2,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,28 L26.6,28 C27.37322,28 28,27.37322 28,26.6 L28,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,2 L26.6,2 C27.37322,2 28,2.626801 28,3.4 L28,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<rect id="矩形" fill="#2A68FF" x="6" y="8" width="18" height="2" rx="1"></rect>
<rect id="矩形备份" fill="#2A68FF" x="6" y="14" width="18" height="2" rx="1"></rect>
<rect id="矩形备份-2" fill="#2A68FF" x="6" y="20" width="18" height="2" rx="1"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/rnr/icon_ocr.svg 0 → 100644
View file @ 8f7acb3f
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_扫描身份证</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="身份信息" transform="translate(-497.000000, -892.000000)">
<g id="编组-6" transform="translate(24.000000, 328.000000)">
<g id="编组-2备份" transform="translate(384.000000, 535.000000)">
<g id="编组-7" transform="translate(89.000000, 23.000000)">
<g id="icon_扫描身份证" transform="translate(0.000000, 6.000000)">
<path d="M9,2 L3.4,2 C2.626801,2 2,2.626801 2,3.4 L2,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9,28 L3.4,28 C2.626801,28 2,27.37322 2,26.6 L2,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,28 L26.6,28 C27.37322,28 28,27.37322 28,26.6 L28,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,2 L26.6,2 C27.37322,2 28,2.626801 28,3.4 L28,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<rect id="矩形备份" fill="#2A68FF" x="6" y="14" width="18" height="2" rx="1"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/rnr/icon_scan.svg 0 → 100644
View file @ 8f7acb3f
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_扫描</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="验证-toast" transform="translate(-464.000000, -1289.000000)">
<g id="编组-2备份" transform="translate(395.000000, 1260.000000)">
<g id="编组-4" transform="translate(69.000000, 23.000000)">
<g id="icon_扫描" transform="translate(0.000000, 6.000000)">
<path d="M9,2 L3.4,2 C2.626801,2 2,2.626801 2,3.4 L2,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9,28 L3.4,28 C2.626801,28 2,27.37322 2,26.6 L2,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,28 L26.6,28 C27.37322,28 28,27.37322 28,26.6 L28,21" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21,2 L26.6,2 C27.37322,2 28,2.626801 28,3.4 L28,9" id="路径" stroke="#2A68FF" stroke-linecap="round" stroke-linejoin="round"></path>
<rect id="矩形" fill="#2A68FF" x="6" y="8" width="18" height="2" rx="1"></rect>
<rect id="矩形备份" fill="#2A68FF" x="6" y="14" width="18" height="2" rx="1"></rect>
<rect id="矩形备份-2" fill="#2A68FF" x="6" y="20" width="18" height="2" rx="1"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/Bluetooth.vue 0 → 100644
View file @ 8f7acb3f
<template>
<div class="base-intro">
<template v-if="isOtgDevice || isNFCDevice">
<van-row>
<van-col :span="13">
<div class="title">方式一：NFC连接</div>
<div class="page-rnr-person-base-step-wrapper small">
<div class="page-rnr-person-base-step">STEP 1：请将身份证放置在设备读取区域中</div>
</div>
</van-col>
<van-col :span="11"><div class="component-ocr-idcard-icon-reader" /></van-col>
</van-row>
<div class="page-rnr-person-base-btn-wrap">
<van-button plain round hairline type="primary" block color="#0761F3" @click="handleReadNFCData">读取信息</van-button>
</div>
</template>
<template v-else>
<div class="title">
方式一：蓝牙连接
<div v-if="isConnect" class="switch-idcard-reader" @click="handleConnectToDevice">
<i class="icon-idcard-switch" />切换设备
</div>
</div>
<van-row>
<van-col :span="13">
<div class="page-rnr-person-base-step-wrapper">
<div class="page-rnr-person-base-step">STEP 1：请使用手机蓝牙连接身份读卡器</div>
<div class="page-rnr-person-base-step">STEP 2：请将身份证放置身份证读卡器上</div>
</div>
</van-col>
<van-col :span="11"><div class="component-ocr-idcard-icon-reader" /></van-col>
</van-row>
<div class="page-rnr-person-base-btn-wrap">
<template v-if="isConnect">
<van-button plain round hairline type="primary" block color="#0761F3" @click="handleReadData">读取信息</van-button>
</template>
<van-button v-else color="#0761F3" round plain hairline block type="primary" @click="handleConnectToDevice">
<i class="page-rnr-person-base-icon-bluetooth" />蓝牙连接
</van-button>
</div>
</template>
</div>
</template>
<script>
import { Toast } from 'vant'
import dayjs from 'dayjs'
import bridge from '@/utils/bridge'
export default {
name: 'Bluetooth',
props: {
title: {
type: String,
default: '方式一：蓝牙连接'
}
},
data() {
return {
isConnect: false,
isOtgDevice: false,
isNFCDevice: false
}
},
activated() {
// 页面展示的时候加载一下设备链接状态
this.getDeviceConnectStatus()
// 当前是否是NFC设备
bridge.geOtgReadType((code = '') => {
this.isOtgDevice = ['X960_6762_66_P', 'ST010', 'ST010-A', 'ST020'].includes(code.toUpperCase())
this.isNFCDevice = ['S61', 'PD3 PRO'].includes(code.toUpperCase())
})
},
methods: {
/**
* 读取nfc设备数据
*/
handleReadNFCData() {
return new Promise((resolve, reject) => {
(this.isOtgDevice ? bridge.readIDCardByOTG : bridge.readIdCardByNFC)(result => {
console.log('设备信息：', result)
this.setUserData(result)
resolve(result)
})
})
},
/**
* 从设备上读取身份证信息
*/
handleReadData() {
return new Promise((resolve, reject) => {
bridge.getDeviceData((result) => {
console.log('设备信息：', result)
this.setUserData(result)
resolve(result)
})
})
},
/**
* 获取设备链接状态
*/
getDeviceConnectStatus() {
// 调用读卡器链接状态
bridge.deviceConnectStatus((result) => {
console.log('读卡器连接状态: ', result)
// 当前链接状态
this.isConnect = result === 'true'
})
},
/**
* 连接蓝牙
*/
async handleConnectToDevice() {
// 读取数据
bridge.chooseBluetoothDevice(result => {
console.log('读卡器连接状态: ', result)
// 当前链接状态
this.isConnect = result === 'true'
})
},
/**
* 设置用户信息
* @param result 读取器读取的用户信息
*/
setUserData(result) {
// 过期时间
const expireDate = dayjs(result.expireDate, 'YYYYMMDD')
const effectDate = dayjs(result.effectDate, 'YYYYMMDD')
// 承载当前读取的值
const formData = {}
// 开始赋值
formData.fullName = result.name
formData.gender = result.gender === '男' ? 1 : 2
formData.certNumber = result.idNum
formData.certExpirationDate = expireDate.isValid() ? expireDate.format('YYYY-MM-DD') : result.expireDate
formData.certEffectiveDate = effectDate.isValid() ? effectDate.format('YYYY-MM-DD') : result.effectDate
// 如果当前选的日期小于当前天
if (expireDate.isValid() && expireDate.isBefore(dayjs().startOf('date'))) {
Toast('当前身份证已过期，请注意更换')
formData.certExpirationDate = ''
}
formData.certAddress = result.address
// 通知外层组件当前值
this.$emit('change', { ...formData })
}
}
}
</script>
<style lang="scss" scoped>
.base-intro{
.title {
color: #242424;
font-size: 24px;
font-weight: 600;
line-height: 33px;
padding-left: 32px;
margin-bottom: 28px;
position: relative;
.switch-idcard-reader {
color: #0761F3;
font-size: 24px;
font-weight: 400;
line-height: 34px;
right: 32px;
top: 0;
position: absolute;
.icon-idcard-switch {
background-image: url(../assets/rnr/ico_switch.png);
background-size: 100% 100%;
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
margin-bottom: -4px;
}
}
}
.page-rnr-person-base-step-wrapper {
padding-left: 32px;
height: 128px;
.page-rnr-person-base-step {
color: rgba(36, 36, 36, 0.4);
font-size: 24px;
font-weight: 400;
line-height: 30px;
margin-top: 12px;
height: 60px;
&:first-child {
margin-top: 0;
}
}
&.small {
height: 60px;
}
}
.component-ocr-idcard-icon-reader {
background-image: url(../assets/rnr/idcard-bluetooth.png);
background-size: auto 100%;
width: 100%;
height: 146px;
}
.page-rnr-person-base-btn-wrap {
margin-top: 24px;
padding: 0 32px;
.van-button {
font-size: 30px;
height: 88px;
.page-rnr-person-base-icon-bluetooth {
background-image: url(../assets/rnr/ico_bluetooth.png);
background-size: 100% 100%;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 12px;
margin-bottom: -4px;
}
}
}
}
</style>
src/components/BridgeUpload.vue 0 → 100644
View file @ 8f7acb3f
<template>
<div class="component-bridge-upload">
<van-uploader
ref="vanUploadFileRef"
v-model="picLink"
:max-count="maxCount"
:max-size="isOverSize"
:after-read="handleAfterRead"
:readonly="isInApp"
@click-upload="handleUploadByBridge"
@oversize="handleOverSize"
@delete="handleDeleteFile"
>
<slot />
</van-uploader>
<van-action-sheet v-model="showUploadSheet" :actions="actions" cancel-text="取消" @select="handleSelect" />
</div>
</template>
<script>
import CompressImg from '@/utils/CompressImg'
import BlobUtil from '@/utils/CompressImg/blobutil'
import bridge, { isInApp, CAMERA, PHOTO } from '@/utils/bridge'
import * as rnr from '@/api/rnr'
import * as markup from '@/api/markup'
import { Toast } from 'vant'
export default {
name: 'BridgeUploadSelect',
props: {
maxCount: {
type: Number,
default: 5
},
maxSize: {
type: Number,
default: 500 * 1024
},
value: {
type: Array,
default: () => ([])
},
security: {
type: Boolean,
default: false
},
compress: {
type: Object,
default: null
},
customer: {
type: Boolean,
default: false
}
},
data() {
return {
showUploadSheet: false,
picLink: [],
actions: [
{ name: '拍照', value: CAMERA },
{ name: '从相册选择', value: PHOTO }
],
isInApp
}
},
mounted() {
if (isInApp) {
// 获取文件
const fileInput = this.$refs.vanUploadFileRef.$el.querySelector('input[type=file]')
// 如果获取到input属性
if (fileInput) {
fileInput.disabled = 'disabled'
}
}
},
methods: {
/**
* 更新文件
* @param file 需要更新的文件
* @param index 需要更新的索引
*/
updateFile(file, index = 0) {
// 保存当前文件
this.$set(this.picLink, index, file)
// 开始上传文件
this.handleAfterRead(file)
},
/**
* 如果通过bridge上传
*/
handleUploadByBridge() {
if (isInApp) {
this.showUploadSheet = true
}
},
/**
* 删除文件
* @param index 当前文件索引
*/
handleDeleteFile(files, { index }) {
// 将文件id保存在照片中
const newValue = [...this.value]
// 从数组中删除此项
newValue.splice(index, 1)
// 开始双向绑定
this.$emit('input', newValue)
// 触发change方法
this.$emit('change', newValue)
},
/**
* 读取文件后，开始上传文件
* @param file 当前选中的文件
*/
async handleAfterRead(file) {
// 等待上传的图片
let uploadFile = file.file
// 如果当前需要压缩
if (this.compress) {
try {
uploadFile = await this.compressImage(file.file, this.compress)
} catch (error) {
console.log('压缩图片报错：', file.file)
return
}
}
// 展示上传中状态
file.status = 'uploading'
file.message = '上传中...'
try {
// 文件可访问路径和文件的uuid
const { uuid } = await (this.security ? (this.customer ? markup : rnr).cuscImageUpload : (this.customer ? markup : rnr).fileUpload)({ file: uploadFile })
// 将文件id保存在照片中
const newValue = [
...this.value,
uuid
]
// 清空加载的提示信息
file.status = ''
file.message = ''
// 开始双向绑定
this.$emit('input', newValue)
// 触发change方法
this.$emit('change', newValue)
} catch (error) {
// 如果上传失败
file.status = 'failed'
file.message = '上传失败'
}
console.log('picLink: ', this.picLink)
},
/**
* 压缩图片
* @param file 当前等待上传的文件
* @param options 压缩选项
*/
compressImage(file, options) {
return new Promise((resolve, reject) => {
CompressImg(file, {
size: 1000,
quality: 90,
...options,
cb: (dataURL) => {
const abData = BlobUtil.base64ToArrayBuffer(dataURL)
if (abData.length > this.maxSize) {
this.handleOverSize()
reject(false)
} else {
// 设置上传文件为压缩后的文件
const compressedFile = BlobUtil.Blob([abData], { type: 'image/jpeg' })
resolve(new File([compressedFile], file.name || '压缩后的文件.jpeg'))
}
}
})
})
},
/**
* 选中方法
* @param option 当前选中方法
*/
handleSelect(option) {
switch (option.value) {
case CAMERA:
console.log('当前点击了camera')
bridge.getCamera((file) => {
// 开始双向绑定
this.picLink.push(file)
// 上传文件
this.handleAfterRead(file)
})
break
case PHOTO:
bridge.getPhoto((file) => {
// 开始双向绑定
this.picLink.push(file)
// 上传文件
this.handleAfterRead(file)
})
break
}
// 关闭弹框
this.showUploadSheet = false
},
/**
* 图片超过最大限制
*/
handleOverSize() {
if (this.compress) {
return true
}
Toast('选择的图片超过最大限制，请重新选择')
},
/**
* 是否超过尺寸限制
*/
isOverSize(file) {
// 如果当前需要压缩，则不判断
if (this.compress) {
return false
}
return file.size >= this.maxSize
}
}
}
</script>
<style>
</style>
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