<template>
|
<div class="alertModal" ref="alert">
|
<!--social post弹框-->
|
<transition name="maskAnimate">
|
<div v-show="modelFlag" class="alertbox">
|
<transition name="zoomAnimate">
|
<div v-show="modelFlag" class="alert-dialog">
|
<div class="alert-content">
|
<div class="alert-header">
|
<span class="alert-close" @click="close">×</span>
|
<span class="alert-title">
|
{{ modelTitle }}
|
</span>
|
</div>
|
<div class="alert-body">
|
{{ modelContent }}
|
</div>
|
<div class="alert-footer">
|
<button class="close link" @click="cancle">{{ modelClose }}</button>
|
<button class="submit link" @click="submit">{{ modelSave }}</button>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</div>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: "Alert",
|
data() {
|
return {
|
modelFlag: false,//0为消失，1为显示
|
modelTitle: 'Alert',//弹窗标题
|
modelClose: '取消',//取消按钮文字
|
modelContent: '',//弹窗内容
|
modelSave: '确定',//确定按钮文字
|
callBack: null, //确定回调函数
|
cancleBack: null, //取消回调函数
|
}
|
},
|
methods: {
|
//成功回调函数
|
doCallBack() {
|
if (typeof this.callBack == 'function') {
|
this.callBack()
|
this.callBack = null;
|
}
|
},
|
doCancleBack() {
|
if (typeof this.cancleBack == 'function') {
|
this.cancleBack()
|
this.cancleBack = null;
|
}
|
},
|
//关闭弹窗，数据重置
|
close() {
|
this.modelFlag = false;
|
this.modelTitle = '';
|
this.modelClose = '取消';
|
this.modelContent = '';
|
this.modelSave = '确定';
|
this.callBack = null;
|
this.cancleBack = null;
|
},
|
//点击确定按钮弹窗消失
|
submit() {
|
this.doCallBack()
|
this.close()
|
},
|
//点击取消按钮弹窗消失
|
cancle() {
|
this.doCancleBack()
|
this.close()
|
},
|
//显示弹窗，记性复制
|
show(options) {
|
if (this.modelFlag == true) { return };
|
this.modelTitle = options.modelTitle || this.modelTitle;
|
this.modelContent = options.modelContent;
|
this.modelFlag = true;
|
this.modelSave = options.modelSave || this.modelSave;
|
this.modelClose = options.modelClose || this.modelClose;
|
if (options.callBack) {
|
this.callBack = options.callBack;
|
}
|
if (options.cancleBack) {
|
this.cancleBack = options.cancleBack;
|
}
|
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
console.log('[alert] show 接收状态 =>', val)
|
this.handleScanVal(val)
|
})
|
|
},
|
// 对扫码结果进行处理
|
handleScanVal: function (val) {
|
console.log('[alert] 事件总线接收 =>', val)
|
|
if (!this.modelFlag) {
|
console.log('[alert] 屏蔽处理')
|
return
|
}
|
if (val == '102001') {
|
this.submit()
|
} else if (val == '102002') {
|
this.cancle()
|
} else {
|
this.$notify({
|
title: '扫描的二维码无效',
|
message: `请扫描确认或取消二维码，或通过触摸屏操作。`,
|
type: 'error'
|
})
|
}
|
}
|
},
|
watch: {
|
// 通过事件总线发送弹窗状态
|
modelFlag: function (newVal) {
|
this.$bus.$emit('isAlert', newVal)
|
}
|
},
|
mounted() {
|
},
|
destroyed() {
|
this.$bus.$off('scanResult')
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.alertbox {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
background-color: rgba(0, 0, 0, .5);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.alert-dialog {
|
width: 400px;
|
height: 300px;
|
overflow: hidden;
|
border-radius: 10px;
|
background-color: #002244;
|
color: #fff;
|
font-size: 24px;
|
|
.alert-content {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.alert-header {
|
width: 100%;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
font-size: 24px;
|
position: relative;
|
|
|
.alert-title {
|
font-weight: 700;
|
}
|
|
.alert-close {
|
width: 70px;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
position: absolute;
|
right: 0;
|
top: 0;
|
color: #002244;
|
cursor: pointer;
|
}
|
}
|
|
.alert-body {
|
flex-grow: 1;
|
padding: 30px;
|
}
|
|
.alert-footer {
|
width: 100%;
|
height: 70px;
|
|
.close,
|
.submit {
|
width: 50%;
|
height: 70px;
|
font-size: 20px;
|
text-align: center;
|
font-weight: 500;
|
cursor: pointer;
|
border: none;
|
border-top: 2px solid #002244;
|
background-color: #003366;
|
}
|
|
.close {
|
font-weight: 500;
|
border-right: 2px solid #002244;
|
box-sizing: border-box;
|
color: #fff;
|
}
|
|
.submit {
|
color: #00ca6c;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
|
.zoomAnimate-enter-active {
|
animation: bounceIn 0.5s;
|
}
|
|
.zoomAnimate-leave-active {
|
animation: bounceOut 0.2s;
|
}
|
|
.maskAnimate-enter-active {
|
animation: fadeIn 0.5s;
|
}
|
|
.maskAnimate-leave-active {
|
animation: fadeOut 0.2s;
|
}
|
</style>
|
