zhang_li
3 months ago
15 changed files with 619 additions and 770 deletions
@ -1,456 +1,441 @@ |
|||
<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> |
|||
|
|||
<scroll-view scroll-y="true" style="max-height: 200px;"> |
|||
<rich-text class="content" :nodes="content"> |
|||
</rich-text> |
|||
</scroll-view> |
|||
|
|||
|
|||
<view class='split_line'></view> |
|||
<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="$u.throttle(cancelClose, 500)"> |
|||
<text :style="{'color':cancelColor}">{{ cancelText }}</text> |
|||
</view> |
|||
<u-line direction="col" length="100%"></u-line> |
|||
<view v-if="showConfirmButton" class="confirm_button" @tap="$u.throttle(confirmClose, 500)"> |
|||
<text :style="{'color':confirmColor}">{{confirmText}}</text> |
|||
<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text> |
|||
</view> |
|||
</view> |
|||
</slot> |
|||
</view> |
|||
</u-modal> |
|||
</view> |
|||
<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> |
|||
|
|||
<scroll-view scroll-y="true" style="max-height: 200px"> |
|||
<rich-text class="content" :nodes="content"> </rich-text> |
|||
</scroll-view> |
|||
|
|||
<view class="split_line"></view> |
|||
<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="$u.throttle(cancelClose, 500)"> |
|||
<text :style="{ color: cancelColor }">{{ cancelText }}</text> |
|||
</view> |
|||
<u-line direction="col" length="100%"></u-line> |
|||
<view v-if="showConfirmButton" class="confirm_button" @tap="$u.throttle(confirmClose, 500)"> |
|||
<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 时,表示用户点击了取消 |
|||
seconds: 0, |
|||
success: () => {} // 回调方法 |
|||
} |
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
open() { |
|||
this.show = true; |
|||
}, |
|||
close() { |
|||
this.$.refs.modal.popupClose(); |
|||
}, |
|||
confirmClose() { |
|||
if (this.show) { |
|||
this.show = false; |
|||
clearInterval(this.timer) //清空timer |
|||
this.$.refs.modal.popupClose(); |
|||
this.success({ |
|||
// cancel: false, |
|||
confirm: true, |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
cancelClose() { |
|||
clearInterval(this.timer) //清空timer |
|||
this.$.refs.modal.popupClose(); |
|||
this.success({ |
|||
// cancel: true, |
|||
confirm: false, |
|||
}); |
|||
}, |
|||
|
|||
// 打开消息弹框(确定) |
|||
showConfirmMessageModal(mContent, callback) { |
|||
this.showConfirmModal("消息", mContent, callback); |
|||
}, |
|||
|
|||
// 打开成功弹框(确定) |
|||
showConfirmSuccessModal(mContent, callback) { |
|||
this.showConfirmModal("成功", mContent, callback); |
|||
}, |
|||
|
|||
// 打开失败弹框(确定) |
|||
showConfirmFailModal(mContent, callback) { |
|||
this.showConfirmModal("失败", mContent, callback); |
|||
}, |
|||
|
|||
// 打开警告弹框(确定) |
|||
showConfirmWarningModal(mContent, callback) { |
|||
this.showConfirmModal("警告", mContent, callback); |
|||
}, |
|||
|
|||
// 打开疑问弹框(确定) |
|||
showConfirmQuestionModal(mContent, callback) { |
|||
this.showConfirmModal("疑问", mContent, callback); |
|||
}, |
|||
|
|||
// 初始化弹框并打开(确定) |
|||
showConfirmModal(mIconType, mContent, callback) { |
|||
this.showModal({ |
|||
iconType: mIconType, |
|||
content: mContent, |
|||
showCancelButton: false, |
|||
success: function(res) { |
|||
if (callback != undefined) { |
|||
if (res.confirm == true) { |
|||
callback(true); |
|||
console.log('用户点击确定') |
|||
} else { |
|||
callback(false); |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 打开消息弹框(取消+确定) |
|||
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); |
|||
}, |
|||
|
|||
// 打开疑问弹框(取消+确定) |
|||
showSelectQuestionModal(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('用户点击取消') |
|||
} |
|||
} |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 打开消息弹框(确定+倒计时) |
|||
showConfirmCountdownMessageModal(mContent, callback) { |
|||
this.showConfirmCountdownModal("消息", mContent, callback); |
|||
}, |
|||
|
|||
// 打开成功弹框(确定+倒计时) |
|||
showConfirmCountdownSuccessModal(mContent, callback) { |
|||
this.showConfirmCountdownModal("成功", mContent, callback); |
|||
}, |
|||
|
|||
// 打开失败弹框(确定+倒计时) |
|||
showConfirmCountdownFailModal(mContent, callback) { |
|||
this.showConfirmCountdownModal("失败", mContent, callback); |
|||
}, |
|||
|
|||
// 打开警告弹框(确定+倒计时) |
|||
showConfirmCountdownWarningModal(mContent, callback) { |
|||
this.showConfirmCountdownModal("警告", mContent, callback); |
|||
}, |
|||
|
|||
// 打开疑问弹框(确定+倒计时) |
|||
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); |
|||
console.log('用户点击确定') |
|||
} else { |
|||
callback(false); |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 打开消息弹框(取消+确定+倒计时) |
|||
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) { |
|||
console.log(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.show = true; |
|||
}, 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(); |
|||
}, |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
/** |
|||
* 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 时,表示用户点击了取消 |
|||
seconds: 0, |
|||
success: () => {} // 回调方法 |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
open() { |
|||
this.show = true |
|||
}, |
|||
close() { |
|||
this.$.refs.modal.popupClose() |
|||
}, |
|||
confirmClose() { |
|||
if (this.show) { |
|||
this.show = false |
|||
clearInterval(this.timer) // 清空timer |
|||
this.success({ |
|||
// cancel: false, |
|||
confirm: true |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
cancelClose() { |
|||
clearInterval(this.timer) // 清空timer |
|||
this.$refs.modal.popupClose() |
|||
this.success({ |
|||
// cancel: true, |
|||
confirm: false |
|||
}) |
|||
}, |
|||
|
|||
// 打开消息弹框(确定) |
|||
showConfirmMessageModal(mContent, callback) { |
|||
this.showConfirmModal('消息', mContent, callback) |
|||
}, |
|||
|
|||
// 打开成功弹框(确定) |
|||
showConfirmSuccessModal(mContent, callback) { |
|||
this.showConfirmModal('成功', mContent, callback) |
|||
}, |
|||
|
|||
// 打开失败弹框(确定) |
|||
showConfirmFailModal(mContent, callback) { |
|||
this.showConfirmModal('失败', mContent, callback) |
|||
}, |
|||
|
|||
// 打开警告弹框(确定) |
|||
showConfirmWarningModal(mContent, callback) { |
|||
this.showConfirmModal('警告', mContent, callback) |
|||
}, |
|||
|
|||
// 打开疑问弹框(确定) |
|||
showConfirmQuestionModal(mContent, callback) { |
|||
this.showConfirmModal('疑问', mContent, callback) |
|||
}, |
|||
|
|||
// 初始化弹框并打开(确定) |
|||
showConfirmModal(mIconType, mContent, callback) { |
|||
this.showModal({ |
|||
iconType: mIconType, |
|||
content: mContent, |
|||
showCancelButton: false, |
|||
success(res) { |
|||
if (callback != undefined) { |
|||
if (res.confirm == true) { |
|||
callback(true) |
|||
console.log('用户点击确定') |
|||
} else { |
|||
callback(false) |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 打开消息弹框(取消+确定) |
|||
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) |
|||
}, |
|||
|
|||
// 打开疑问弹框(取消+确定) |
|||
showSelectQuestionModal(mContent, callback) { |
|||
this.showSelectModal('疑问', mContent, callback) |
|||
}, |
|||
|
|||
// 初始化弹框并打开(取消+确定) |
|||
showSelectModal(mIconType, mContent, callback) { |
|||
this.showModal({ |
|||
iconType: mIconType, |
|||
content: mContent, |
|||
success(res) { |
|||
if (callback != undefined) { |
|||
if (res.confirm == true) { |
|||
callback(true) |
|||
console.log('用户点击确定') |
|||
} else { |
|||
callback(false) |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 打开消息弹框(确定+倒计时) |
|||
showConfirmCountdownMessageModal(mContent, callback) { |
|||
this.showConfirmCountdownModal('消息', mContent, callback) |
|||
}, |
|||
|
|||
// 打开成功弹框(确定+倒计时) |
|||
showConfirmCountdownSuccessModal(mContent, callback) { |
|||
this.showConfirmCountdownModal('成功', mContent, callback) |
|||
}, |
|||
|
|||
// 打开失败弹框(确定+倒计时) |
|||
showConfirmCountdownFailModal(mContent, callback) { |
|||
this.showConfirmCountdownModal('失败', mContent, callback) |
|||
}, |
|||
|
|||
// 打开警告弹框(确定+倒计时) |
|||
showConfirmCountdownWarningModal(mContent, callback) { |
|||
this.showConfirmCountdownModal('警告', mContent, callback) |
|||
}, |
|||
|
|||
// 打开疑问弹框(确定+倒计时) |
|||
showConfirmCountdownQuestionModal(mContent, callback) { |
|||
this.showConfirmCountdownModal('疑问', mContent, callback) |
|||
}, |
|||
|
|||
// 初始化弹框并打开(确定+倒计时) |
|||
showConfirmCountdownModal(mIconType, mContent, callback) { |
|||
this.showModal({ |
|||
iconType: mIconType, |
|||
content: mContent, |
|||
showCancelButton: false, |
|||
showConfirmCountdown: true, |
|||
success(res) { |
|||
if (callback != undefined) { |
|||
if (res.confirm == true) { |
|||
callback(true) |
|||
console.log('用户点击确定') |
|||
} else { |
|||
callback(false) |
|||
console.log('用户点击取消') |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 打开消息弹框(取消+确定+倒计时) |
|||
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(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) { |
|||
console.log(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.show = true |
|||
}, 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() |
|||
} |
|||
}, 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 { |
|||
margin-top: 16px; |
|||
margin-bottom: 16px; |
|||
margin-left: 8px; |
|||
margin-right: 8px; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: pre-line; |
|||
|
|||
|
|||
} |
|||
|
|||
.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; |
|||
} |
|||
.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 { |
|||
margin-top: 16px; |
|||
margin-bottom: 16px; |
|||
margin-left: 8px; |
|||
margin-right: 8px; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: pre-line; |
|||
} |
|||
|
|||
.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> |
|||
|
@ -1,135 +1,126 @@ |
|||
<template> |
|||
<view> |
|||
<uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()"> |
|||
<view class="popup_box"> |
|||
<view class="pop_title uni-flex space-between"> |
|||
<view class="" style="font-size: 35rpx;"> |
|||
扫描 : {{title}} |
|||
</view> |
|||
|
|||
<view class=""> |
|||
<image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" |
|||
@click="closeScanPopup()"></image> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class=""> |
|||
<win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType" |
|||
:isShowHistory="isShowHistory" :clearResult="true"></win-com-scan> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<comMessage ref="comMessage" @afterClose="getfocus"></comMessage> |
|||
|
|||
</view> |
|||
<view> |
|||
<uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()" :mask-close-able="false"> |
|||
<view class="popup_box"> |
|||
<view class="pop_title uni-flex space-between"> |
|||
<view class="" style="font-size: 35rpx"> 扫描 : {{ title }} </view> |
|||
|
|||
<view class=""> |
|||
<image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" @click="closeScanPopup()"></image> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class=""> |
|||
<win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType" :isShowHistory="isShowHistory" :clearResult="true"></win-com-scan> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<comMessage ref="comMessage" @afterClose="getfocus"></comMessage> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import winComScan from '@/mycomponents/scan/winComScan.vue' |
|||
import { |
|||
getContainerByNumber |
|||
} from '@/api/request2.js'; |
|||
|
|||
export default { |
|||
name: 'winScanPack', |
|||
components: { |
|||
winComScan, |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '箱标签或托标签' |
|||
}, |
|||
isShowHistory: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
headerType:{ |
|||
type: String, |
|||
default: 'HPQ,HMQ,HCQ' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
openScanPopup() { |
|||
setTimeout(res => { |
|||
this.$refs.popup.open('bottom') |
|||
}, 500) |
|||
}, |
|||
|
|||
closeScanPopup() { |
|||
this.$refs.popup.close(); |
|||
this.$emit("close", ''); |
|||
}, |
|||
|
|||
scanClick() { |
|||
this.$refs.comscan.clickScanMsg(); |
|||
}, |
|||
|
|||
cancelClick() { |
|||
this.$refs.comscan.clearScanValue(); |
|||
}, |
|||
|
|||
getScanResult(result) { |
|||
if (result.success) { |
|||
if(result.label.labelType=="ContainerLabel"){ |
|||
this.getContainerByNumber(result); |
|||
}else { |
|||
this.$emit("getResult", result); |
|||
} |
|||
} else { |
|||
this.showMessage(result.message) |
|||
} |
|||
}, |
|||
|
|||
getContainerByNumber(result){ |
|||
getContainerByNumber(result.label.container).then(res => { |
|||
if (res.data.list.length > 0) { |
|||
this.$emit("getResult", result); |
|||
} else { |
|||
this.showMessage('未查找到托码【' + result.label.container + '】'); |
|||
} |
|||
|
|||
}).catch(error => { |
|||
this.showMessage(error); |
|||
}) |
|||
}, |
|||
|
|||
getfocus() { |
|||
if (this.$refs.comscan != undefined) { |
|||
this.$refs.comscan.getfocus(); |
|||
} |
|||
}, |
|||
|
|||
losefocus() { |
|||
if (this.$refs.comscan != undefined) { |
|||
this.$refs.comscan.losefocus(); |
|||
} |
|||
}, |
|||
showMessage(message) { |
|||
this.$refs.comMessage.showMessage(message); |
|||
}, |
|||
change(e) { |
|||
this.show = e.show |
|||
}, |
|||
|
|||
} |
|||
} |
|||
import winComScan from '@/mycomponents/scan/winComScan.vue' |
|||
import { getContainerByNumber } from '@/api/request2.js' |
|||
|
|||
export default { |
|||
name: 'winScanPack', |
|||
components: { |
|||
winComScan |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '箱标签或托标签' |
|||
}, |
|||
isShowHistory: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
headerType: { |
|||
type: String, |
|||
default: 'HPQ,HMQ,HCQ' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false |
|||
} |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
openScanPopup() { |
|||
setTimeout((res) => { |
|||
this.$refs.popup.open('bottom') |
|||
}, 500) |
|||
}, |
|||
|
|||
closeScanPopup() { |
|||
this.$refs.popup.close() |
|||
this.$emit('close', '') |
|||
}, |
|||
|
|||
scanClick() { |
|||
this.$refs.comscan.clickScanMsg() |
|||
}, |
|||
|
|||
cancelClick() { |
|||
this.$refs.comscan.clearScanValue() |
|||
}, |
|||
|
|||
getScanResult(result) { |
|||
if (result.success) { |
|||
if (result.label.labelType == 'ContainerLabel') { |
|||
this.getContainerByNumber(result) |
|||
} else { |
|||
this.$emit('getResult', result) |
|||
} |
|||
} else { |
|||
this.showMessage(result.message) |
|||
} |
|||
}, |
|||
|
|||
getContainerByNumber(result) { |
|||
getContainerByNumber(result.label.container) |
|||
.then((res) => { |
|||
if (res.data.list.length > 0) { |
|||
this.$emit('getResult', result) |
|||
} else { |
|||
this.showMessage(`未查找到托码【${result.label.container}】`) |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
this.showMessage(error) |
|||
}) |
|||
}, |
|||
|
|||
getfocus() { |
|||
if (this.$refs.comscan != undefined) { |
|||
this.$refs.comscan.getfocus() |
|||
} |
|||
}, |
|||
|
|||
losefocus() { |
|||
if (this.$refs.comscan != undefined) { |
|||
this.$refs.comscan.losefocus() |
|||
} |
|||
}, |
|||
showMessage(message) { |
|||
this.$refs.comMessage.showMessage(message) |
|||
}, |
|||
change(e) { |
|||
this.show = e.show |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.scroll-view { |
|||
overflow-y: scroll; |
|||
height: auto; |
|||
max-height: 300rpx; |
|||
} |
|||
.scroll-view { |
|||
overflow-y: scroll; |
|||
height: auto; |
|||
max-height: 300rpx; |
|||
} |
|||
</style> |
|||
|
Loading…
Reference in new issue