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