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.
498 lines
15 KiB
498 lines
15 KiB
<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> |
|
<li v-for="(item) in (3 - businessArr.length%3)" class="sitting" :key="item"></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: ': 柜员日中轧账' |
|
}, |
|
{ |
|
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; |
|
} |
|
} |
|
} |
|
|
|
.sitting { |
|
opacity: 0; |
|
cursor: default!important; |
|
} |
|
</style> |