|
|
|
|
<template>
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<img class="sth manager" src="@/assets/img/manager.png" alt="">
|
|
|
|
|
<img class="sth guide" src="@/assets/img/guide.png" alt="">
|
|
|
|
|
|
|
|
|
|
<div class="actions">
|
|
|
|
|
<ul class="btns">
|
|
|
|
|
<li @click="showTake">取号</li>
|
|
|
|
|
<li @click="showData">填单</li>
|
|
|
|
|
<li @click="showCopy">复印</li>
|
|
|
|
|
<li>取回</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog :visible.sync="takeVisible" width="1280px" @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="580px" :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">
|
|
|
|
|
<img src="@/assets/img/finish.png" alt="">
|
|
|
|
|
<h6>取号成功</h6>
|
|
|
|
|
<p class="text">您选择了现金业务</p>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog :visible.sync="dataVisible" width="1280px" @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)">
|
|
|
|
|
<img src="@/assets/img/idCard-sm.png" 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)">
|
|
|
|
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
|
|
|
|
|
<p>特殊业务申请书</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)">
|
|
|
|
|
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt="">
|
|
|
|
|
<p style="font-size: 12px">开立单位银行结算账户申请书</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(1)}" @click="checkData(5)">
|
|
|
|
|
<img src="@/assets/img/idCard-sm.png" alt="">
|
|
|
|
|
<p>现金存款凭证</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(2)}" @click="checkData(6)">
|
|
|
|
|
<img src="@/assets/img/idCard-copy-sm.png" alt="">
|
|
|
|
|
<p>转账凭证</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(7)">
|
|
|
|
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
|
|
|
|
|
<p>现金支票</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(4)}" @click="checkData(8)">
|
|
|
|
|
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt="">
|
|
|
|
|
<p>转账支票</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(2)}" @click="checkData(6)">
|
|
|
|
|
<img src="@/assets/img/idCard-copy-sm.png" alt="">
|
|
|
|
|
<p>支票领购单</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(7)">
|
|
|
|
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
|
|
|
|
|
<p>现金缴款单</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="{checked: checkList.includes(4)}" @click="checkData(8)">
|
|
|
|
|
<img style="margin-top: 32px" src="@/assets/img/goods/cash-sm.png" alt="">
|
|
|
|
|
<p>境外汇款申请书</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="dia-footer">
|
|
|
|
|
<button type="button">确定</button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog :visible.sync="copyVisible" width="1280px" @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)">
|
|
|
|
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
|
|
|
|
|
<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
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.wrap{
|
|
|
|
|
.sth{
|
|
|
|
|
position: absolute;
|
|
|
|
|
&.cp{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.guide{
|
|
|
|
|
top: 90px;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 222px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover{
|
|
|
|
|
opacity: .9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.manager{
|
|
|
|
|
top: 68px;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
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: 280px;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
line-height: 94px;
|
|
|
|
|
background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:last-child{
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.data-dia{
|
|
|
|
|
.take-list{
|
|
|
|
|
width: 810px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
li{
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 380px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
border: 4px solid #DBDBDB;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: rgba(216,216,216,0.10);
|
|
|
|
|
&:first-child{
|
|
|
|
|
margin: 0 50px 50px 0;
|
|
|
|
|
}
|
|
|
|
|
&:last-child{
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
}
|
|
|
|
|
img{
|
|
|
|
|
margin: 0 45px;
|
|
|
|
|
}
|
|
|
|
|
p{
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
&.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
