luoJunYong.123
3 years ago
parent
b1d69c00f9
commit
4dfabc543e
7 changed files with 1812 additions and 678 deletions
@ -0,0 +1,478 @@ |
|||||||
|
<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: '请选择一个业务' |
||||||
|
}); |
||||||
|
}); |
||||||
|
return |
||||||
|
} |
||||||
|
this.setShowBusiness(judge) |
||||||
|
}, |
||||||
|
checkTake(myKey){ |
||||||
|
if(this.takeCheck === myKey) { |
||||||
|
this.takeCheck = '' |
||||||
|
}else { |
||||||
|
this.takeCheck = myKey |
||||||
|
} |
||||||
|
}, |
||||||
|
selectBusiness() { |
||||||
|
if(!this.takeCheck) { |
||||||
|
this.$confirm('由于您未选择一个业务，系统将返回主界面, 是否继续?', '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning', |
||||||
|
center: true |
||||||
|
}).then(() => { |
||||||
|
this.$router.push('/index') |
||||||
|
}).catch(() => { |
||||||
|
this.$message({ |
||||||
|
type: 'info', |
||||||
|
message: '请选择一个业务' |
||||||
|
}); |
||||||
|
}); |
||||||
|
return |
||||||
|
} |
||||||
|
this.setBusinessKey(this.takeCheck) |
||||||
|
this.setShowBusiness(false) |
||||||
|
}, |
||||||
|
}, |
||||||
|
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: 20%; |
||||||
|
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: skyblue; |
||||||
|
|
||||||
|
.data-title2 { |
||||||
|
position: absolute; |
||||||
|
left: 15px; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
.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: 200px; |
||||||
|
height: 200px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin: 5px 10px; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
.file { |
||||||
|
position: relative; |
||||||
|
max-width: 180px; |
||||||
|
max-height: 140px; |
||||||
|
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: 164px; |
||||||
|
height: 164px; |
||||||
|
text-align: center; |
||||||
|
background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat; |
||||||
|
cursor: pointer; |
||||||
|
margin: 5px 7px; |
||||||
|
&: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> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue