|
|
|
|
<template>
|
|
|
|
|
<el-dialog :visible.sync="showBusiness" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
|
|
|
|
|
<div slot="title" class="dia-header2">
|
|
|
|
|
<div class="data-title2">请选择业务</div>
|
|
|
|
|
<div class="close"><img v-lazy="closeImg" alt="" @click="showBusinessSelect(false)" /></div>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="tips2">请选择您要办理的业务</p>
|
|
|
|
|
<ul class="take-list2">
|
|
|
|
|
<li v-for="(item) in businessArr" :class="{checked: takeCheck == item.myKey}" :key="item.myKey" @click="checkTake(item.myKey)">
|
|
|
|
|
<img v-lazy="businessImg" alt="">
|
|
|
|
|
<p>{{ item.myKey + item.text}}</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="dia-footer2">
|
|
|
|
|
<div class='busyButtonBox'>
|
|
|
|
|
<el-button @click="showBusinessSelect(false)">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="selectBusiness()">确定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState, mapMutations } from 'vuex';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
// showBusiness: {
|
|
|
|
|
// type: Boolean,
|
|
|
|
|
// default: false
|
|
|
|
|
// }
|
|
|
|
|
// default: '本业务需要授权'
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
if(this.businessKey) {
|
|
|
|
|
// 如果上次保存有 那么直接赋值
|
|
|
|
|
this.takeCheck = this.businessKey
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
checkList: [],
|
|
|
|
|
takeCheck: '',
|
|
|
|
|
businessImg: require('@/assets/img/业务列表2.png'),
|
|
|
|
|
closeImg: require('@/assets/svg/close.svg'),
|
|
|
|
|
// 选择业务逻辑
|
|
|
|
|
businessArr: [
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目一',
|
|
|
|
|
text: ': 个人活期开户、存款'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二',
|
|
|
|
|
text: ': 个人活期转账、取款、销户'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目三',
|
|
|
|
|
text: ': 整存整取开户存款'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目四',
|
|
|
|
|
text: ': 整存整取部分提前支取'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目五',
|
|
|
|
|
text: ': 整存整取全部提前支取'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目六',
|
|
|
|
|
text: ': 零存整取开户'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目七',
|
|
|
|
|
text: ': 零存整取续存'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目八',
|
|
|
|
|
text: ': 零存整取销户'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目九',
|
|
|
|
|
text: ': 通知存款开户'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十',
|
|
|
|
|
text: ': 通知存款销户'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十一',
|
|
|
|
|
text: ': 公司基本户和开立'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十二',
|
|
|
|
|
text: ': 公司存款'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十三',
|
|
|
|
|
text: ': 公司现金支票取款'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十四',
|
|
|
|
|
text: ': 公司现金支票转账'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十五',
|
|
|
|
|
text: ': 密码修改'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十六',
|
|
|
|
|
text: ': 密码挂失'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十七',
|
|
|
|
|
text: ': 挂失解挂'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十八',
|
|
|
|
|
text: ': 现金领用'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目十九',
|
|
|
|
|
text: ': 现金上缴'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十',
|
|
|
|
|
text: ': 现金调入'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十一',
|
|
|
|
|
text: ': 现金调出'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十二',
|
|
|
|
|
text: ': 凭证领用'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十三',
|
|
|
|
|
text: ': 凭证上缴'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十四',
|
|
|
|
|
text: ': 凭证调入'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十五',
|
|
|
|
|
text: ': 凭证调出'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十六',
|
|
|
|
|
text: ': 柜员日中轧账'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
myKey: '项目二十七',
|
|
|
|
|
text: ': 网点日中轧账'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapMutations({
|
|
|
|
|
setBusinessKey: 'system/setBusinessKey',
|
|
|
|
|
setShowBusiness: 'system/setShowBusiness'
|
|
|
|
|
}),
|
|
|
|
|
closeData() {
|
|
|
|
|
this.checkList = [];
|
|
|
|
|
},
|
|
|
|
|
showBusinessSelect (judge) {
|
|
|
|
|
if(!judge && !this.businessKey) {
|
|
|
|
|
// this.$confirm('由于您未选择一个业务，系统将返回主界面, 是否继续?', '提示', {
|
|
|
|
|
// confirmButtonText: '确定',
|
|
|
|
|
// cancelButtonText: '取消',
|
|
|
|
|
// type: 'warning',
|
|
|
|
|
// center: true
|
|
|
|
|
// }).then(() => {
|
|
|
|
|
// this.$router.push('/index')
|
|
|
|
|
// }).catch(() => {
|
|
|
|
|
// this.$message({
|
|
|
|
|
// type: 'info',
|
|
|
|
|
// message: '请选择一个业务'
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '请选择一个业务'
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.setShowBusiness(judge)
|
|
|
|
|
},
|
|
|
|
|
checkTake(myKey){
|
|
|
|
|
if(this.takeCheck === myKey) {
|
|
|
|
|
this.takeCheck = ''
|
|
|
|
|
}else {
|
|
|
|
|
this.takeCheck = myKey
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
selectBusiness() {
|
|
|
|
|
if(!this.takeCheck) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '请选择一个业务'
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.setBusinessKey(this.takeCheck)
|
|
|
|
|
if(!this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '业务开发中，尽请期待!'
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.setShowBusiness(false)
|
|
|
|
|
sessionStorage.setItem('businessKey', this.$store.state.system.businessKey)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState({
|
|
|
|
|
showBusiness: state => state.system.showBusiness,
|
|
|
|
|
businessKey: state => state.system.businessKey
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
showBusiness(newVal) {
|
|
|
|
|
if(!newVal) {
|
|
|
|
|
this.takeCheck = this.businessKey
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.data-dia {
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
margin-top: 4vh !important;
|
|
|
|
|
background: #fff;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 7%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, 0);
|
|
|
|
|
padding: 0 15px 15px;
|
|
|
|
|
z-index: 997;
|
|
|
|
|
border: 1px solid #e6e6e6;
|
|
|
|
|
max-height: 600px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.dia-header {
|
|
|
|
|
position: relative;
|
|
|
|
|
.data-title {
|
|
|
|
|
height:70px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
line-height: 70px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
background: url('../../assets/img/dia-title.png') 0 0 / cover no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15px;
|
|
|
|
|
right: 15px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 业务选择中的
|
|
|
|
|
.take-list2{
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
height: 40vh;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
li{
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 30%;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
margin: 1vh 0;
|
|
|
|
|
border: 4px solid #DBDBDB;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: rgba(216,216,216,0.10);
|
|
|
|
|
// &:first-child{
|
|
|
|
|
// margin: 0 0px 50px 0;
|
|
|
|
|
// }
|
|
|
|
|
// &:last-child{
|
|
|
|
|
// margin-left: 50px;
|
|
|
|
|
// }
|
|
|
|
|
img{
|
|
|
|
|
width: 15%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
//height: 154px;
|
|
|
|
|
//margin: 0 45px;
|
|
|
|
|
}
|
|
|
|
|
p{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #000;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
&.checked{
|
|
|
|
|
background: rgba(97,145,255,0.10) url('../../assets/svg/checked.svg') 96% 7%/auto no-repeat;
|
|
|
|
|
border-color: #6191FF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dia-header2 {
|
|
|
|
|
position: relative;height: 50px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
background-color: rgb(98, 149, 243) ;
|
|
|
|
|
border-top-left-radius:14px;
|
|
|
|
|
border-top-right-radius:14px;
|
|
|
|
|
.data-title2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 15px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
color:#fff;
|
|
|
|
|
}
|
|
|
|
|
.close {
|
|
|
|
|
height: 50px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 15px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
img {
|
|
|
|
|
vertical-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tips2 {
|
|
|
|
|
margin: 1vh 0 2vh 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
width: 940px;
|
|
|
|
|
min-height: 204px;
|
|
|
|
|
max-height: 360px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.img-wrap{
|
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin: 5px 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.file {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 180px;
|
|
|
|
|
max-height: 130px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 10px 10px ;
|
|
|
|
|
img {
|
|
|
|
|
margin-top: 45px;
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
line-height: 54px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text{
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
white-space:nowrap;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 15px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%,0);
|
|
|
|
|
}
|
|
|
|
|
&.checked {
|
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat,
|
|
|
|
|
url('../../assets/svg/checked.svg') 165px 7% / auto no-repeat;
|
|
|
|
|
p {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.seal{
|
|
|
|
|
width: 1100px;
|
|
|
|
|
padding: 0 5%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.box{
|
|
|
|
|
border: 2px solid #e6e6e6;
|
|
|
|
|
width: 45%;
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
.left{
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 50%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.file {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 140px;
|
|
|
|
|
height: 140px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 5px 7px;
|
|
|
|
|
img{
|
|
|
|
|
width: 130px;
|
|
|
|
|
max-height: 90px;
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(n>1){
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 130px;
|
|
|
|
|
max-height: 108px;
|
|
|
|
|
margin: 10px auto 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
line-height: 54px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
&.checked {
|
|
|
|
|
background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat,
|
|
|
|
|
url('../../assets/svg/checked.svg') 163px 7% / auto no-repeat;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.active {
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right{
|
|
|
|
|
margin-left: 5%;
|
|
|
|
|
}
|
|
|
|
|
.else{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dia-footer2 {
|
|
|
|
|
height: 70px;
|
|
|
|
|
line-height: 70px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.busyButtonBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
