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.
470 lines
19 KiB
470 lines
19 KiB
<template> |
|
<div class="wrap"> |
|
<!-- src="@/assets/img/manager.png" --> |
|
<img class="sth manager" v-lazy="lazy1" alt=""> |
|
<div class="sth guide" @click="toPart" alt=""> |
|
返回 |
|
</div> |
|
<div class="actions"> |
|
<ul class="btns"> |
|
<li @click="showTake">取号</li> |
|
<li @click="showData">填单</li> |
|
<li @click="showCopy">复印</li> |
|
<li @click="showRecaption">取回</li> |
|
</ul> |
|
</div> |
|
<el-dialog :visible.sync="takeVisible" style="width: 100%" @close="closeTake" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
|
<div slot="title" class="dia-header"> |
|
<div class="data-title">取号机</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeTakeDia"> |
|
</div> |
|
<p class="tips">- 请选择办理的业务 -</p> |
|
<ul class="take-list"> |
|
<li :class="{checked: takeCheck == 1}" @click="checkTake(1)"> |
|
<img src="@/assets/svg/cash.svg" alt=""> |
|
<p>现金业务</p> |
|
</li> |
|
<li :class="{checked: takeCheck == 2}" @click="checkTake(2)"> |
|
<img src="@/assets/svg/non-cash.svg" alt=""> |
|
<p>个人非现金业务</p> |
|
</li> |
|
<li :class="{checked: takeCheck == 3}" @click="checkTake(3)"> |
|
<img src="@/assets/svg/company.svg" alt=""> |
|
<p>公司业务</p> |
|
</li> |
|
<li :class="{checked: takeCheck == 4}" @click="checkTake(4)"> |
|
<img src="@/assets/svg/financial.svg" alt=""> |
|
<p>理财业务</p> |
|
</li> |
|
</ul> |
|
<div class="dia-footer"> |
|
<button type="button" @click="confirmTake">确定</button> |
|
</div> |
|
</el-dialog> |
|
|
|
<el-dialog :visible.sync="takeResultVisible" width="400px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
|
<div slot="title" class="dia-header"> |
|
<div class="data-title">取号机</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false"> |
|
</div> |
|
<div class="result"> |
|
<div style='width: 60px;height: 60px;margin: auto'> |
|
<img src="@/assets/img/finish.png" alt=""> |
|
</div> |
|
<h6>取号成功</h6> |
|
<p class="text">您选择了现金业务</p> |
|
</div> |
|
</el-dialog> |
|
|
|
<el-dialog :visible.sync="dataVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
|
<div slot="title" class="dia-header"> |
|
<div class="data-title">银行单据</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia"> |
|
</div> |
|
<p class="tips">- 请单击选中所需材料、双击可放大预览 -</p> |
|
<ul class="list"> |
|
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)"> |
|
<el-image |
|
:src="elImg[0]" |
|
:fit="elImgFit" |
|
></el-image> |
|
|
|
<!-- <img style='width: 100%;height: 154px' src="@/assets/img/goods/accountApplyBook.jpg" alt=""> --> |
|
<p>开户申请书</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(2)}" @click="checkData(2)"> |
|
<img src="@/assets/img/idCard-copy-sm.png" alt=""> |
|
<p>密码挂失申请书</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)"> |
|
<el-image |
|
style="margin-top: 0" |
|
:src="elImg[2]" |
|
:fit="elImgFit" |
|
></el-image> |
|
<p>特殊业务申请书</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)"> |
|
<img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt=""> |
|
<p style="font-size: 14px;line-height: 15px">开立单位银行结算账户申请书</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(5)}" @click="checkData(5)"> |
|
<img src="@/assets/img/goods/CashCertificate.png" alt=""> |
|
<p>现金存款凭证</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(6)}" @click="checkData(6)"> |
|
<img src="@/assets/img/goods/zzpt.png" alt=""> |
|
<p>转账凭证</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(7)}" @click="checkData(7)"> |
|
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> |
|
<el-image |
|
:src="elImg[1]" |
|
:fit="elImgFit" |
|
lazy></el-image> |
|
<p>现金支票</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(8)}" @click="checkData(8)"> |
|
<img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt=""> |
|
<p>转账支票</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(9)}" @click="checkData(9)"> |
|
<img src="@/assets/img/idCard-copy-sm.png" alt=""> |
|
<p>支票领购单</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(10)}" @click="checkData(10)"> |
|
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> |
|
<el-image |
|
:src="elImg[1]" |
|
:fit="elImgFit" |
|
lazy></el-image> |
|
<p>现金缴款单</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(11)}" @click="checkData(11)"> |
|
<img style="margin-top: 10px" src="@/assets/img/goods/cash-sm.png" alt=""> |
|
<p>境外汇款申请书</p> |
|
</li> |
|
<!-- 这个是占位的！ --> |
|
<li class="sitting2"></li> |
|
</ul> |
|
|
|
|
|
<div class="dia-footer"> |
|
<button type="button">确定</button> |
|
</div> |
|
</el-dialog> |
|
|
|
<el-dialog :visible.sync="copyVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
|
<div slot="title" class="dia-header"> |
|
<div class="data-title">复印</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeCopyDia"> |
|
</div> |
|
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p> |
|
<ul class="list" style="justify-content: center"> |
|
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)"> |
|
<img src="@/assets/img/idCard-sm.png" alt=""> |
|
<p>身份证</p> |
|
</li> |
|
|
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)" style='margin-left: 10px'> |
|
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> |
|
<el-image |
|
style="margin-top: 10px" |
|
:src="elImg[1]" |
|
:fit="elImgFit" |
|
></el-image> |
|
<p>开户申请书</p> |
|
</li> |
|
</ul> |
|
<div class="dia-footer"> |
|
<button type="button">确定</button> |
|
</div> |
|
</el-dialog> |
|
|
|
<el-dialog :visible.sync="recaptionVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
|
<div slot="title" class="dia-header"> |
|
<div class="data-title">取回</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeRecaption"> |
|
</div> |
|
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p> |
|
<ul class="list" style="justify-content: center"> |
|
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)"> |
|
<img src="@/assets/img/idCard-sm.png" alt=""> |
|
<p>身份证</p> |
|
</li> |
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)" style='margin-left: 10px'> |
|
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> --> |
|
<el-image |
|
style="margin-top: -10" |
|
:src="elImg[1]" |
|
:fit="elImgFit" |
|
></el-image> |
|
<p>开户申请书</p> |
|
</li> |
|
</ul> |
|
<div class="dia-footer"> |
|
<button type="button">确定</button> |
|
</div> |
|
</el-dialog> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapState } from 'vuex' |
|
export default { |
|
name: 'index', |
|
data() { |
|
return { |
|
takeCheck: '', |
|
takeVisible: false, |
|
takeResultVisible: false, |
|
dataVisible: false, |
|
checkList: [], |
|
copyVisible: false, |
|
recaptionVisible: false, |
|
elImgFit: 'contain', |
|
elImg: [ |
|
require('@/assets/img/goods/accountApplyBook.jpg'), |
|
require('@/assets/img/open-account-apply-sm.png'), |
|
require('@/assets/img/goods/businessSpecialApplication.png') |
|
], |
|
listLi1 : [ |
|
{checked: 1, click: 1, src: require('@/assets/img/goods/accountApplyBook.jpg'), title: '开户申请书'}, |
|
{checked: 2, click: 2, src: require('@/assets/img/idCard-copy-sm.png'), title: '密码挂失申请书'}, |
|
{checked: 3, click: 3, src: require('@/assets/img/goods/businessSpecialApplication.png'), title: '特殊业务申请书'}, |
|
{checked: 4, click: 4, src: require('@/assets/img/goods/cash-sm.png'), title: '开立单位银行结算账户申请书'}, |
|
{checked: 1, click: 5, src: require('@/assets/img/goods/CashCertificate.png'), title: '现金存款凭证'}, |
|
{checked: 2, click: 6, src: require('@/assets/img/goods/zzpt.png'), title: '转账凭证'}, |
|
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'}, |
|
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金支票'}, |
|
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '转账支票'}, |
|
{checked: 2, click: 6, src: require('@/assets/img/idCard-copy-sm.png'), title: '支票领购单'}, |
|
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金缴款单'}, |
|
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'}, |
|
], |
|
lazy1: require('@/assets/img/manager.png') |
|
} |
|
}, |
|
mounted() { |
|
|
|
}, |
|
methods: { |
|
showTake(type){ |
|
this.takeVisible = true |
|
}, |
|
checkTake(id){ |
|
this.takeCheck = id |
|
}, |
|
closeTakeDia(){ |
|
this.takeVisible = false |
|
}, |
|
closeTake(){ |
|
this.takeCheck = '' |
|
}, |
|
confirmTake(){ |
|
this.takeVisible = false |
|
this.takeResultVisible = true |
|
}, |
|
toPart(){ |
|
this.$router.push('/index/list') |
|
// let token = sessionStorage.getItem('token') |
|
// let cid = sessionStorage.getItem('cid') |
|
// let systemId = sessionStorage.getItem('systemId') |
|
|
|
// let projectId = sessionStorage.getItem('projectId') |
|
// let assessmentId = sessionStorage.getItem('assessmentId') |
|
// let classId = sessionStorage.getItem('classId') |
|
// if (projectId){ |
|
// //线上 |
|
// // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId |
|
// //测试服 |
|
// location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId |
|
// //本地 |
|
// // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId |
|
// }else{ |
|
// //线上 |
|
// // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId |
|
// //测试服 |
|
// location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId |
|
// // 本地 |
|
// // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId |
|
// } |
|
}, |
|
showData(){ |
|
this.dataVisible = true |
|
}, |
|
checkData(id){ |
|
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id) |
|
}, |
|
closeDataDia(){ |
|
this.dataVisible = false |
|
}, |
|
closeData(){ |
|
this.checkList = [] |
|
}, |
|
|
|
showCopy(){ |
|
this.copyVisible = true |
|
}, |
|
closeCopyDia(){ |
|
this.copyVisible = false |
|
}, |
|
showRecaption() { |
|
this.recaptionVisible = true |
|
}, |
|
closeRecaption() { |
|
this.recaptionVisible = false |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.wrap{ |
|
background: rgb(245,246,248); |
|
width:100%; |
|
//min-height:900px; |
|
overflow:hidden; |
|
.sth{ |
|
position: absolute; |
|
&.cp{ |
|
cursor: pointer; |
|
} |
|
} |
|
.guide{ |
|
top: 80px; |
|
left: 10px; |
|
width: 150px; |
|
cursor: pointer; |
|
background:url(../../../assets/img/lobby-btn-bg.png); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
line-height: 50px; |
|
font-size: 24px; |
|
text-align: center; |
|
color: #fff; |
|
|
|
&:hover{ |
|
opacity: .9; |
|
} |
|
} |
|
.manager{ |
|
top: 68px; |
|
left: 10%; |
|
width: 80%; |
|
height: calc(100% - 68px); |
|
} |
|
} |
|
.actions{ |
|
position: fixed; |
|
bottom: 0; |
|
left: 50%; |
|
padding: 55px; |
|
transform: translateX(-50%); |
|
background-color: rgba(255,255,255,.7); |
|
border-top-left-radius: 20px; |
|
border-top-right-radius: 20px; |
|
.btns{ |
|
display: flex; |
|
justify-content: space-between; |
|
li{ |
|
width: 200px; |
|
margin-right: 50px; |
|
text-align: center; |
|
color: #fff; |
|
font-size: 28px; |
|
line-height: 70px; |
|
background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat; |
|
background-size: 100% 100%; |
|
cursor: pointer; |
|
&:last-child{ |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
} |
|
/deep/.data-dia{ |
|
// width:80%; |
|
width: 800px; |
|
min-width:400px; |
|
margin: auto; |
|
.take-list{ |
|
width: 600px; |
|
margin: 0 auto; |
|
display: flex; |
|
justify-content: space-between; |
|
flex-wrap: wrap; |
|
li{ |
|
display: inline-flex; |
|
align-items: center; |
|
width: 250px; |
|
height: 120px; |
|
border: 4px solid #DBDBDB; |
|
border-radius: 20px; |
|
cursor: pointer; |
|
background-color: rgba(216,216,216,0.10); |
|
&:first-child{ |
|
margin: 0 0px 30px 0; |
|
} |
|
&:last-child{ |
|
//margin-left: 30px; |
|
} |
|
img{ |
|
margin-left: 10px; |
|
width: 30%; |
|
} |
|
p{ |
|
font-size: 18px; |
|
color: #000; |
|
text-align: center; |
|
font-weight: bold; |
|
padding: 0 15px; |
|
} |
|
&.checked{ |
|
background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat; |
|
border-color: #6191FF; |
|
} |
|
} |
|
} |
|
.result{ |
|
margin: 30px 0 20px; |
|
text-align: center; |
|
img{ |
|
width: 136px; |
|
} |
|
h6{ |
|
margin: 30px 0 10px; |
|
font-size: 30px; |
|
color: #000; |
|
} |
|
.text{ |
|
font-size: 22px; |
|
color: #797979; |
|
} |
|
} |
|
.list { |
|
max-height: 30vh; |
|
overflow: auto; |
|
display: flex; |
|
justify-content: space-around; |
|
flex-wrap: wrap; |
|
&>li { |
|
width: 140px; |
|
height: 140px; |
|
margin: 10px 0; |
|
// 这里和common.js混了！ |
|
box-sizing: border-box; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
align-items: center; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
padding: 10px; |
|
// &>img { |
|
// width: 100%; |
|
// //max-width: 90%; |
|
// } |
|
&>.el-image { |
|
width: 100%; |
|
max-height: 80px; |
|
overflow: hidden; |
|
img { |
|
//transform: translateY(-35%); |
|
// width: 100%; |
|
} |
|
} |
|
p{ |
|
font-size: 14px; |
|
line-height: 40px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.sitting2 { |
|
opacity: 0; |
|
cursor: default!important; |
|
} |
|
</style> |