huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 Commits
2 Branches
12 Tags
238 MiB
Tag: Branch: Tree: ff8832297a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ff8832297a'
${ noResults }
FE_bankTeaching/src/components/checkPhoto/index.vue

391 lines
21 KiB
Raw Normal View History Unescape

update
3 years ago
<template>
update
3 years ago
<!-- 这个是图片查看器组件，装上后可以通过双击传进来展示的信息进行不同图片的展示（图片上有文字，如你所见，文字是通过style定位上去的。）template中的if判断不同证件id码上不同文字 -->
update
3 years ago
<div class="relative -translate-y-2/4 overflow-hidden" style="margin-top: 10px;color: black;" :class="[ needBoxShadow? 'shadow-2xl': '' ]" id="checkPhoto" v-drag>
update
3 years ago
<!-- 这个部分调整关闭按钮的位置，因为有些图片关闭按钮会覆盖到一些东西 -->
update
3 years ago
<template v-if="imgSrcId==15">
<img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt" style="right: 50px; top: 30px;width: 30px;height: 30px;" />
update
3 years ago
</template>
update
3 years ago
<template v-else-if="imgSrcId==13">
<img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt" style="right: 50px; top: 30px;width: 30px;height: 30px;" />
</template>
<template v-else-if="imgSrcId==23">
<img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt" style="right: 50px; top: 30px;width: 30px;height: 30px;" />
update
3 years ago
</template>
<template v-else>
update
3 years ago
<img class="absolute cursor-pointer hover:bg-red-700 bg-red-300" src="@/assets/svg/close.svg" alt="" @click="closeIt" style="right: 3px; top: 3px;width: 30px;height: 30px;" />
update
3 years ago
</template>
update
3 years ago
<!-- 这个部分就是将文字码上去 -->
update
3 years ago
<template v-if="imgSrcId==14">
update
3 years ago
<h3 class="text-xl" style="left: 105px;top: 120px;">{{ dataFlow.userName }}</h3>
update
3 years ago
<h3 class="text-xl" v-if="dataFlow.sex==1" style="left: 470px;top: 120px;">√</h3>
<h3 class="text-xl" v-else style="left: 498px;top: 120px;">√</h3>
update
3 years ago
<h3 class="text-xl" style="left: 595px;top: 120px;word-spacing: 5px;">{{ dataFlow.birthday.split('-').join('&emsp;&emsp;') }}</h3>
<h3 class="text-xl" style="left: 104px;top: 146px;">√</h3>
<h3 class="text-xl" style="left: 100px;top: 175px;">{{ dataFlow.idNumber }}</h3>
<h3 class="text-xl" style="left: 120px;top: 243px;">{{ dataFlow.phone }}</h3>
<h3 class="text-xl" style="left: 356px;top: 243px;">{{ dataFlow.staticPhone }}</h3>
<h3 class="text-xl" style="left: 676px;top: 218px;">{{ dataFlow.mailNumber }}</h3>
<h3 class="text-xl" style="left: 80px;top: 263px;">√</h3>
<h3 class="text-xl" style="left: 110px;top: 195px;">{{ dataFlow.mailbox.slice(0, dataFlow.mailbox.indexOf('省')) }}</h3>
<h3 class="text-xl" style="left: 200px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('省') + 1, dataFlow.mailbox.indexOf('市')) }}</h3>
<h3 class="text-xl" style="left: 290px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('市') + 1, dataFlow.mailbox.indexOf('村' || '区' || '县')) }}</h3>
update
3 years ago
<!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full " :alt="imgSrcName" :title="imgSrcName"> -->
update
3 years ago
</template>
update
3 years ago
<template v-else-if="imgSrcId==13 || imgSrcId==442 || imgSrcId==23 || imgSrcId==431">
update
3 years ago
<h3 class="text-xl" style="left: 96px;top: 82px;">姓名：&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
<h3 class="text-xl" style="left: 96px;top: 160px;">性别：&nbsp;&nbsp;{{ dataFlow.sex==1? '男': '女' }}</h3>
<!-- <h3 class="text-xl" style="left: 270px;top: 115px;">汉</h3> -->
<h3 class="text-xl" style="left: 96px;top: 237px;">生日：&nbsp;&nbsp;{{ dataFlow.birthday }}</h3>
<!-- <h3 class="text-xl" style="left: 220px;top: 177px;">{{ dataFlow.birthday.split('-')[1] }}</h3>
<h3 class="text-xl" style="left: 290px;top: 187px;">{{ dataFlow.birthday.split('-')[2] }}</h3> -->
<h3 class="text-xl text-left" style="left: -200px;top: 282px;width: 100%;">
<span style="background-color: rgb(223, 230,238); display: inline-block; height: 28px; border-radius: 5px; width: 60px;margin-left: -10px;text-align: right;">地址：</span>
<span style="margin-left: 10px; display: inline-block;">{{ dataFlow.mailbox }}</span>
</h3>
<h3 class="text-xl" style="left: 96px;top: 356px;">NO.：&nbsp;&nbsp;{{ dataFlow.idNumber }}</h3>
update
3 years ago
<!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName"> -->
update
3 years ago
</template>
update
3 years ago
<template v-else-if="imgSrcId==16 || imgSrcId==563" >
<h3 class="text-4xl text-white" style="left: 300px;top: 35px;">No: {{ dataFlow.voucherNumber }}</h3>
<h3 class="text-4xl text-white" style="left: 300px;top: 390px;">:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
</template>
<template v-else-if="imgSrcId==411" >
update
3 years ago
<h3 class="text-xl" style="left: 630px;top: 10px;"> {{ dataFlow.ticketNumber }}</h3>
update
3 years ago
<h3 class="text-xl" style="left: 690px;top: 70px;">商业银行</h3>
<h3 class="text-xl" style="left: 680px;top: 95px;">12802851701099</h3>
update
3 years ago
<h3 class="text-xl" style="left: 300px;top: 95px;">{{ dataFlow.collectingCompany }}</h3>
<h3 class="text-xl" style="left: 340px;top: 129px;">{{ transMoney(dataFlow.transMoney) }}</h3>
<h3 class="text-xl" style="left: 667px;top: 135px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
bug修复
3 years ago
<h3 class="text-xl" style="left: 300px;top: 172px;">贷款</h3>
update
3 years ago
<h3 class="text-xs" style="left: 350px;top: 78px;">{{ mapNumber(getNowYear(0)) }}</h3>
update
3 years ago
<h3 class="text-xs" :style="{left: getNowYear(1)>10?'420px':'430px',top: '78px'}">{{ mapNumber(getNowYear(1)) }}</h3>
<h3 class="text-xs" :style="{left: getNowYear(2)>10?'471px':'485px',top: '78px'}">{{ mapNumber(getNowYear(2)) }}</h3>
update
3 years ago
<h3 class="text-xs" style="left: 76px;top: 189px;">{{ getNowYear(0) }}</h3>
<h3 class="text-xs" style="left: 126px;top: 189px;">{{ getNowYear(1) }}</h3>
<h3 class="text-xs" style="left: 163px;top: 189px;">{{ getNowYear(2) }}</h3>
update
3 years ago
</template>
update
3 years ago
<template v-else-if="imgSrcId==412" >
<h3 class="text-xl" style="left: 630px;top: 10px;">00246862</h3>
<h3 class="text-xs" style="left: 700px;top: 80px;">{{ dataFlow.collectingCompany }}</h3>
<h3 class="text-xs" style="left: 305px;top: 103px;">六品居股份有限公司</h3>
<h3 class="text-xs" style="left: 490px;top: 103px;">62270072009899</h3>
<h3 class="text-xs" style="left: 700px;top: 103px;">12802851701099</h3>
<h3 class="text-xl" style="left: 340px;top: 130px;">{{ transMoney(dataFlow.transMoney) }}</h3>
<h3 class="text-xl" style="left: 682px;top: 140px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
<h3 class="text-xs" :style="{ left: '355px',top: '80px' }">{{ mapNumber(getNowYear(0)) }}</h3>
<h3 class="text-xs" :style="{left: getNowYear(1)>10?'430px':'445px',top: '80px'}">{{ mapNumber(getNowYear(1)) }}</h3>
<h3 class="text-xs" :style="{left: getNowYear(2)>10?'482px':'497px',top: '80px'}">{{ mapNumber(getNowYear(2)) }}</h3>
<h3 class="text-xs" style="left: 80px;top: 194px;">{{ getNowYear(0) }}</h3>
<h3 class="text-xs" style="left: 128px;top: 194px;">{{ getNowYear(1) }}</h3>
<h3 class="text-xs" style="left: 167px;top: 194px;">{{ getNowYear(2) }}</h3>
</template>
<template v-else-if="imgSrcId==434 || imgSrcId==435" >
<h3 class="text-xl" style="left: 475px;top: 418px;">：913403005685450862</h3>
<h3 class="text-xl" style="left: 220px;top: 480px;">：{{ dataFlow.collectingCompany }}</h3>
</template>
<template v-else-if="imgSrcId==409" >
update
3 years ago
<h3 class="text-xs" style="left: 645px;top: 126px;">{{ getNowYear(0) }}</h3>
<h3 class="text-xs" style="left: 700px;top: 126px;">{{ getNowYear(1) }}</h3>
<h3 class="text-xs" style="left: 740px;top: 126px;">{{ getNowYear(2) }}</h3>
<h3 class="text-xs" style="left: 300px;top: 169px;">备用金</h3>
<h3 class="text-xs" style="left: 670px;top: 169px;">商业银行</h3>
<h3 class="text-xs" style="left: 250px;top: 145px;">{{ dataFlow.collectingCompany }}</h3>
<h3 class="text-xs" style="left: 640px;top: 145px;">12802851701099</h3>
<h3 class="text-xl" style="left: 340px;top: 195px;">{{ transMoney(dataFlow.transMoney) }}</h3>
<h3 class="text-lg" style="left: 607px;top: 205px;letter-spacing: 4.8px">{{ ('' + dataFlow.transMoney).padStart(9, 0).padEnd(11, 0) }}</h3>
update
3 years ago
</template>
<template v-else-if="imgSrcId==407" >
<h3 class="text-lg" style="left: 200px;top: 95px;">{{ dataFlow.userName }}</h3>
<h3 class="text-lg" style="left: 500px;top: 95px;">{{ dataFlow.voucherNumber }}</h3>
<h3 class="text-lg" style="left: 170px;top: 137px;">{{ dataFlow.idNumber }}</h3>
<h3 class="text-lg" style="left: 170px;top: 158px;">{{ dataFlow.phone }}</h3>
<h3 class="text-lg" style="left: 450px;top: 158px;">{{ dataFlow.mailbox }}</h3>
</template>
<template v-else-if="imgSrcId==406" >
<h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
<h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
<h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
<h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
<h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
<h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
<h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
</template>
<template v-else-if="imgSrcId==468" >
<h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
<h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
<h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
<h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
<h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
<h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
<h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
<h3 class="text-md" style="left: 700px;top: 370px;">{{ nowDate }}</h3>
<h3 class="text-lg" style="left: 560px;top: 405px;">{{ dataFlow.userName }}</h3>
</template>
<template v-else-if="imgSrcId==413" >
<h3 class="text-lg" style="left: 690px;top: 21px;">{{ getNowYear(0) }}</h3>
<h3 class="text-lg" style="left: 755px;top: 21px;">{{ getNowYear(1) }}</h3>
<h3 class="text-lg" style="left: 280px;top: 75px;">{{ dataFlow.collectingCompany }}</h3>
<h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
<h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
<h3 class="text-lg" style="left: 330px;top: 115px;">10</h3>
<h3 class="text-lg" style="left: 540px;top: 111px;">00242986</h3>
<h3 class="text-lg" style="left: 690px;top: 111px;">00242996</h3>
</template>
<template v-else-if="imgSrcId==426" >
<h3 class="text-md" style="left: 180px;top: 205px;">{{ dataFlow.voucherNumber }}</h3>
<h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.userName }}</h3>
<h3 class="text-md" style="left: 180px;top: 235px;">6227007200580123</h3>
<h3 class="text-md" style="left: 450px;top: 235px;">郭平安</h3>
<h3 class="text-md" style="left: 116px;top: 306px;letter-spacing: 3.3px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
</template>
update
3 years ago
<template v-else-if="imgSrcId==584 || imgSrcId==582" >
<div class="coverIt" style="top: 75px; left: 400px;width: 300px;height: 25px;">
<h3 class="smallFont" style="left: 0px;">{{ mapNumber(getYear2(0, 'drawDate')) }}</h3>
<h3 class="smallFont" style="left: 50px;font-weight: 700">年</h3>
<h3 class="smallFont" style="left: 65px;">{{ mapNumber(getYear2(1, 'drawDate')) }}</h3>
<h3 class="smallFont" style="left: 90px;font-weight: 700">月</h3>
<h3 class="smallFont" style="left: 104px;">{{ mapNumber(getYear2(2, 'drawDate')) }}</h3>
<h3 class="smallFont" style="left: 140px;font-weight: 700">日</h3>
</div>
<h3 class="text-base" style="left: 250px;top: 126px;">商业银行</h3>
<h3 class="text-base" style="left: 210px;top: 162px;">12802851701099</h3>
<h3 class="text-base" style="left: 570px;top: 126px;">六品居股份有限公司</h3>
<h3 class="text-xl" style="left: 340px;top: 230px;">{{ transMoney(dataFlow.transMoney) }}</h3>
<h3 class="text-lg" style="left: 560px;top: 242px;letter-spacing: 11.5px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
<div class="coverIt" style="top: 270px; left: 180px;width: 200px;height: 20px;line-height: 25px;">
<h3 class="text-base" style="left: 0px;">{{ mapNumber(getYear2(0, 'expireDate')) }}</h3>
<h3 class="text-base" style="left: 70px;font-weight: 700">年</h3>
<h3 class="text-base" style="left: 90px;">{{ mapNumber(getYear2(1, 'expireDate')) }}</h3>
<h3 class="text-base" style="left: 130px;font-weight: 700">月</h3>
<h3 class="text-base" style="left: 150px;">{{ mapNumber(getYear2(2, 'expireDate')) }}</h3>
<h3 class="text-base" style="left: 200px;font-weight: 700">日</h3>
</div>
</template>
<template v-else-if="imgSrcId==430 || imgSrcId==429" >
<h3 class="text-lg" v-if="imgSrcId==430" style="left: 730px;top: 35px;">{{ dataFlow.oldDepositNumber }}</h3>
<h3 class="text-lg" v-else style="left: 730px;top: 35px;">{{ dataFlow.newDepositNumber }}</h3>
<h3 class="text-lg" style="left: 572px;top: 199px;">部分支取</h3>
<h3 class="text-xl" style="left: 210px;top: 135px;">{{ transMoney(dataFlow.transMoney) }}</h3>
<h3 class="text-xl" style="left: 590px;top: 135px;">{{ dataFlow.transMoney }}</h3>
</template>
update
3 years ago
update
3 years ago
<template v-else-if="imgSrcId==428" >
update
3 years ago
<h3 class="text-lg" style="left: 730px;top: 35px;">{{ dataFlow.nowDepositNumber }}</h3>
update
3 years ago
</template>
update
3 years ago
<!-- 这里就是要展示的图片 dia-header让它可以带动整个组件被拖拽 因为这里的v-drag会去搜这个组件内的dia-header -->
update
3 years ago
<img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header shadow-2xl" :alt="imgSrcName" :title="imgSrcName" ref="showPage">
update
3 years ago
<slot />
update
3 years ago
</div>
</template>
<script>
import { mapGetters } from 'vuex'
update
3 years ago
import { getOperation } from '@/api/http';
update
3 years ago
import Sortable from 'sortablejs'
update
3 years ago
export default {
props: {
imgSrc: {
type: String,
require: true
},
imgSrcId: {
require: true
},
imgSrcName: {
require: true
},
update
3 years ago
showImg: {
type: Boolean,
default: false
}
update
3 years ago
// requireTalk: {
// type: String,
// default: ''
// },
// others: {
// type: Object,
// default: {
// left: '0px',
// top: '0px'
// }
// }
},
update
3 years ago
data() {
return {
nowDate: ''
}
},
created() {
update
3 years ago
// 获取现在的时间
update
3 years ago
this.nowDate = (() => {
const date = new Date()
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
})()
update
3 years ago
},
update
3 years ago
methods: {
closeIt() {
this.$emit('update:showImg', false)
update
3 years ago
}
update
3 years ago
},
update
3 years ago
computed: {
...mapGetters({
dataFlow: 'system/dataFlow'
update
3 years ago
}),
getNowYear() {
return (index) => {
update
3 years ago
// 看该业务是否指定日期
const { assignDate } = this.dataFlow
if(!assignDate) {
return this.nowDate.split('-')[index]
}else {
return assignDate.split('-')[index]
}
update
3 years ago
}
},
update
3 years ago
getYear2() {
return (index, name) => {
// 看该业务是否指定日期
const { [name]: tmpName } = this.dataFlow
if(!tmpName) {
const tmpDate = this.nowDate.split('-')[index]
return tmpDate
}else {
const tmpDate = tmpName.split('-')[index]
return tmpDate
}
}
},
update
3 years ago
// 业务需求将钱币显示为大写，比如 千 -> 仟 这个方法可以做到 这里是要连起来的 具体看用在哪
update
3 years ago
transMoney() {
return (str) => {
var num = parseFloat(str);
var strOutput = "",
update
3 years ago
strUnit = '仟佰拾亿仟佰拾萬仟佰拾圆角分';
update
3 years ago
num += "00";
var intPos = num.indexOf('.'); 
if (intPos >= 0){
num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
}
strUnit = strUnit.substr(strUnit.length - num.length);
for (var i=0; i < num.length; i++){
strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i,1),1) + strUnit.substr(i,1);
}
update
3 years ago
return strOutput.replace(/零角零分$/, '').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|萬])/g, '$1').replace(/零+圆/, '圆').replace(/亿零{0,3}萬/, '亿').replace(/^圆/, "零圆")
update
3 years ago
}
},
update
3 years ago
// 业务需求将数字转化为大写 比如 2022.4.20 -> 贰零贰贰 肆 贰拾
update
3 years ago
mapNumber() {
update
3 years ago
// 通过map映射将相应的数字对应上
update
3 years ago
const myMap = new Map([
['0', '零'],
['1', '壹'],
['2', '贰'],
['3', '叁'],
['4', '肆'],
['5', '伍'],
['6', '陆'],
['7', '柒'],
['8', '捌'],
['9', '玖']
])
return (str) => {
let myStr = str + ''
let strEnd = ''
update
3 years ago
if(myStr.length === 4) {
update
3 years ago
for(const val of myStr) {
strEnd += myMap.get(val)
}
}else {
update
3 years ago
if(myStr.charAt(0) == '0') {
strEnd = myMap.get(myStr.charAt(1))
}else if(myStr.charAt(0) == '1') {
// console.log('Wok')
strEnd = '拾'
if(myStr.charAt(1) != '0') {
strEnd = strEnd + myMap.get(myStr.charAt(1))
}
update
3 years ago
}else {
update
3 years ago
strEnd = myMap.get(myStr.charAt(0)) + '拾'
if(myStr.charAt(1) != '0') {
strEnd += myMap.get(myStr.charAt(1))
update
3 years ago
}
update
3 years ago
}
}
return strEnd
}
update
3 years ago
},
update
3 years ago
update
3 years ago
// 众口难调，有些图片就是要大div加上boxshadow才出效果，因为要填字不得不放大
needBoxShadow() {
const needShadow = [ 411, 412, 14 ]
return needShadow.findIndex(item => item === this.imgSrcId) !== -1
update
3 years ago
}
update
3 years ago
}
}
</script>
update
3 years ago
<style lang="scss" scoped>
h3 {
update
3 years ago
position: absolute;
update
3 years ago
z-index: 9990;
update
3 years ago
text-align: center;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
update
3 years ago
&:hover{
update
3 years ago
cursor: text!important;
update
3 years ago
}
}
update
3 years ago
.smallFont {
font-size: 1px;
}
.coverIt {
position: absolute;
background-color: rgb(255, 255, 255);
}
update
3 years ago
</style>