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.
479 lines
12 KiB
479 lines
12 KiB
<template name="show-modal">
|
|
<view>
|
|
<u-modal v-model="show" :title-style="{color: 'red'}" :title="title" :showTitle="false"
|
|
:showConfirmButton="false" ref="modal">
|
|
<view class="slot-content">
|
|
<slot name="icon">
|
|
<image class="icon" :src="icon" />
|
|
</slot>
|
|
<slot name="content">
|
|
<rich-text class="content" :nodes="content">
|
|
</rich-text>
|
|
|
|
</slot>
|
|
<u-line></u-line>
|
|
<slot name="button">
|
|
<view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;">
|
|
<view v-if="showCancelButton" class="cance_button" @tap="cancelClose">
|
|
<text :style="{'color':cancelColor}">{{ cancelText }}</text>
|
|
</view>
|
|
<u-line direction="col" length="100%"></u-line>
|
|
<view v-if="showConfirmButton" class="confirm_button" @tap="confirmClose">
|
|
<text :style="{'color':confirmColor}">{{confirmText}}</text>
|
|
<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</view>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* modal 模态框
|
|
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
|
* */
|
|
export default {
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
show: false, // 是否显示
|
|
iconType: '消息',
|
|
icon: '../../static/icons/error-circle.svg',
|
|
title: '', // 提示标题
|
|
content: '', // 提示内容
|
|
cancelText: '取消', // 取消按钮的文字
|
|
confirmText: '确定', // 确认按钮文字
|
|
showCancel: true, // 是否显示取消按钮，默认为 true
|
|
confirmColor: '#007aff', // 确定按钮颜色
|
|
cancelColor: null, // 取消按钮颜色
|
|
showConfirmButton: true, // 是否显示确认按钮
|
|
showConfirmCountdown: true, // 是否显示确定倒计时
|
|
showCancelButton: true, // 是否显示取消按钮
|
|
showClose: false,
|
|
confirm: false, //为 true 时，表示用户点击了确定按钮
|
|
cancel: false, //为 true 时，表示用户点击了取消
|
|
isDisabled: true, //为 true 时，表示用户可以点击，反之则不可以
|
|
seconds: 0,
|
|
success: () => {} // 回调方法
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
open() {
|
|
this.show = true;
|
|
this.isDisabled = true;
|
|
},
|
|
close() {
|
|
this.$.refs.modal.popupClose();
|
|
this.isDisabled = false;
|
|
},
|
|
confirmClose() {
|
|
if (!this.isDisabled) return
|
|
this.isDisabled = false
|
|
// console.log('确定点击')
|
|
if (this.show) {
|
|
this.show = false;
|
|
clearInterval(this.timer) //清空timer
|
|
this.$.refs.modal.popupClose();
|
|
this.success({
|
|
// cancel: false,
|
|
confirm: true,
|
|
});
|
|
}
|
|
},
|
|
|
|
cancelClose() {
|
|
if (!this.isDisabled) return
|
|
this.isDisabled = false
|
|
clearInterval(this.timer) //清空timer
|
|
this.$.refs.modal.popupClose();
|
|
this.success({
|
|
// cancel: true,
|
|
confirm: false,
|
|
});
|
|
},
|
|
|
|
// 打开消息弹框(确定+倒计时)
|
|
showMessage(mContent, callback) {
|
|
this.showConfirmCountdownModal("消息", mContent, callback);
|
|
},
|
|
|
|
// 打开成功弹框(确定+倒计时)
|
|
showSuccessMessage(mContent, callback) {
|
|
this.showConfirmCountdownModal("成功", mContent, callback);
|
|
},
|
|
|
|
// 打开失败弹框(确定）
|
|
showErrorMessage(mContent, callback) {
|
|
this.showConfirmModal("失败", mContent, callback);
|
|
},
|
|
|
|
// 显示崩溃消息(无确定）
|
|
showBreakMessage(mContent, callback) {
|
|
this.showNoButtonModal("失败", mContent, callback);
|
|
},
|
|
|
|
// 打开疑问弹框(取消+确定）
|
|
showQuestionMessage(mContent, callback) {
|
|
this.showSelectModal("疑问", mContent, callback);
|
|
},
|
|
|
|
// 打开警告弹框(确定+倒计时)
|
|
showWarningMessage(mContent, callback) {
|
|
this.showConfirmCountdownModal("警告", mContent, callback);
|
|
},
|
|
|
|
// 打开失败弹框(确定+倒计时)
|
|
showConfirmCountdownFailModal(mContent, callback) {
|
|
this.showConfirmCountdownModal("失败", mContent, callback);
|
|
},
|
|
|
|
// 打开消息弹框(确定）
|
|
showConfirmMessageModal(mContent, callback) {
|
|
this.showConfirmModal("消息", mContent, callback);
|
|
},
|
|
|
|
// 打开成功弹框(确定）
|
|
showConfirmSuccessModal(mContent, callback) {
|
|
this.showConfirmModal("成功", mContent, callback);
|
|
},
|
|
|
|
|
|
// 打开警告弹框(确定）
|
|
showConfirmWarningModal(mContent, callback) {
|
|
this.showConfirmModal("警告", mContent, callback);
|
|
},
|
|
|
|
// 打开疑问弹框(确定）
|
|
showConfirmQuestionModal(mContent, callback) {
|
|
this.showConfirmModal("疑问", mContent, callback);
|
|
},
|
|
|
|
// 初始化弹框并打开(确定）
|
|
showNoButtonModal(mIconType, mContent, callback) {
|
|
this.showModal({
|
|
iconType: mIconType,
|
|
content: mContent,
|
|
showConfirmButton:false,
|
|
showCancelButton: false,
|
|
success: function(res) {
|
|
if (callback != undefined) {
|
|
if (res.confirm == true) {
|
|
callback(true);
|
|
} else {
|
|
callback(false);
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
// 初始化弹框并打开(确定）
|
|
showConfirmModal(mIconType, mContent, callback) {
|
|
this.showModal({
|
|
iconType: mIconType,
|
|
content: mContent,
|
|
showCancelButton: false,
|
|
success: function(res) {
|
|
if (callback != undefined) {
|
|
if (res.confirm == true) {
|
|
callback(true);
|
|
} else {
|
|
callback(false);
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
// 打开消息弹框(取消+确定）
|
|
showSelectMessageModal(mContent, callback) {
|
|
this.showSelectModal("消息", mContent, callback);
|
|
},
|
|
|
|
// 打开成功弹框(取消+确定）
|
|
showSelectSuccessModal(mContent, callback) {
|
|
this.showSelectModal("成功", mContent, callback);
|
|
},
|
|
|
|
// 打开失败弹框(取消+确定）
|
|
showSelectFailModal(mContent, callback) {
|
|
this.showSelectModal("失败", mContent, callback);
|
|
},
|
|
|
|
// 打开警告弹框(取消+确定）
|
|
showSelectWarningModal(mContent, callback) {
|
|
this.showSelectModal("警告", mContent, callback);
|
|
},
|
|
|
|
// 初始化弹框并打开(取消+确定）
|
|
showSelectModal(mIconType, mContent, callback) {
|
|
this.showModal({
|
|
iconType: mIconType,
|
|
content: mContent,
|
|
success: function(res) {
|
|
if (callback != undefined) {
|
|
if (res.confirm == true) {
|
|
callback(true);
|
|
console.log('用户点击确定')
|
|
} else {
|
|
callback(false);
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
// 打开疑问弹框(确定+倒计时)
|
|
showConfirmCountdownQuestionModal(mContent, callback) {
|
|
this.showConfirmCountdownModal("疑问", mContent, callback);
|
|
},
|
|
|
|
// 初始化弹框并打开(确定+倒计时)
|
|
showConfirmCountdownModal(mIconType, mContent, callback) {
|
|
this.showModal({
|
|
iconType: mIconType,
|
|
content: mContent,
|
|
showCancelButton: false,
|
|
showConfirmCountdown: true,
|
|
success: function(res) {
|
|
if (callback != undefined) {
|
|
if (res.confirm == true) {
|
|
callback(true);
|
|
} else {
|
|
callback(false);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 打开消息弹框(取消+确定+倒计时)
|
|
showSelectCountdownMessageModal(mContent, callback) {
|
|
this.showSelectCountdownModal("消息", mContent, callback);
|
|
},
|
|
|
|
// 打开成功弹框(取消+确定+倒计时)
|
|
showSelectCountdownSuccessModal(mContent, callback) {
|
|
this.showSelectCountdownModal("成功", mContent, callback);
|
|
},
|
|
|
|
// 打开失败弹框(取消+确定+倒计时)
|
|
showSelectCountdownFailModal(mContent, callback) {
|
|
this.showSelectCountdownModal("失败", mContent, callback);
|
|
},
|
|
|
|
// 打开警告弹框(取消+确定+倒计时)
|
|
showSelectCountdownWarningModal(mContent, callback) {
|
|
this.showSelectCountdownModal("警告", mContent, callback);
|
|
},
|
|
|
|
// 打开疑问弹框(取消+确定+倒计时)
|
|
showSelectCountdownQuestionModal(mContent, callback) {
|
|
this.showSelectCountdownModal("疑问", mContent, callback);
|
|
},
|
|
|
|
// 初始化弹框并打开(取消+确定+倒计时)
|
|
showSelectCountdownModal(mIconType, mContent, callback) {
|
|
this.showModal({
|
|
iconType: mIconType,
|
|
content: mContent,
|
|
showConfirmCountdown: true,
|
|
success: function(res) {
|
|
if (callback != undefined) {
|
|
if (res.confirm == true) {
|
|
callback(true);
|
|
console.log('用户点击确定')
|
|
} else {
|
|
callback(false);
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 初始化弹框并打开
|
|
showModal(data) {
|
|
if (data.iconType) {
|
|
this.iconType = data.iconType
|
|
switch (data.iconType) {
|
|
case '消息':
|
|
this.icon = '/static/icons/error-circle.svg';
|
|
break;
|
|
case '成功':
|
|
this.icon = '/static/icons/checkmark-circle.svg';
|
|
break;
|
|
case '失败':
|
|
this.icon = '/static/icons/close-circle.svg';
|
|
break;
|
|
case '警告':
|
|
this.icon = '/static/icons/warning.svg';
|
|
break;
|
|
case '疑问':
|
|
this.icon = '/static/icons/question-circle.svg';
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
// image
|
|
if (data.title) {
|
|
this.title = data.title
|
|
}
|
|
if (data.content) {
|
|
this.content = data.content
|
|
} else {
|
|
this.content = ''
|
|
}
|
|
if (data.cancelText) {
|
|
this.cancelText = data.cancelText
|
|
} else {
|
|
this.cancelText = '取消'
|
|
}
|
|
if (data.confirmText) {
|
|
this.confirmText = data.confirmText
|
|
} else {
|
|
this.confirmText = '确定'
|
|
}
|
|
|
|
if (data.showCancel === false || data.showCancel === true) {
|
|
this.showCancel = data.showCancel
|
|
} else {
|
|
this.showCancel = true
|
|
}
|
|
|
|
if (data.confirmColor) {
|
|
this.confirmColor = data.confirmColor
|
|
} else {
|
|
this.confirmColor = '#007aff'
|
|
}
|
|
|
|
if (data.cancelColor) {
|
|
this.cancelColor = data.cancelColor
|
|
} else {
|
|
this.cancelColor = '#666F83'
|
|
}
|
|
|
|
if (data.showConfirmButton === false || data.showConfirmButton === true) {
|
|
this.showConfirmButton = data.showConfirmButton
|
|
} else {
|
|
this.showConfirmButton = true
|
|
}
|
|
|
|
if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
|
|
this.showConfirmCountdown = data.showConfirmCountdown
|
|
} else {
|
|
this.showConfirmCountdown = false
|
|
}
|
|
|
|
if (data.showCancelButton === false || data.showCancelButton === true) {
|
|
this.showCancelButton = data.showCancelButton
|
|
} else {
|
|
this.showCancelButton = true
|
|
}
|
|
|
|
if (data.success) {
|
|
this.success = data.success
|
|
} else {
|
|
this.success = () => {}
|
|
}
|
|
setTimeout(res => {
|
|
this.open();
|
|
}, 500)
|
|
if (this.showConfirmCountdown) {
|
|
this.startTimer();
|
|
}
|
|
|
|
},
|
|
|
|
startTimer() {
|
|
this.seconds = 3;
|
|
clearInterval(this.timer)
|
|
this.timer = setInterval(() => {
|
|
this.seconds--
|
|
// console.log("倒计时时间", this.seconds);
|
|
if (this.seconds <= 0) {
|
|
this.timeUp()
|
|
return
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
timeUp() {
|
|
// clearInterval(this.timer)
|
|
console.log('时间到')
|
|
this.confirmClose();
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.slot-content {
|
|
font-size: 36rpx;
|
|
display: flex; //弹性布局
|
|
flex-direction: column; //垂直排列
|
|
align-items: center; //子元素居中
|
|
// background-image: url()
|
|
}
|
|
|
|
.icon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
opacity: 1; //透明度
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.cance_button {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.confirm_button {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.confirm_text {
|
|
// color: $uni-color-primary;
|
|
}
|
|
|
|
.def_text {
|
|
color: $uni-color-primary;
|
|
}
|
|
</style>
|
|
|