zhang_li
3 months ago
15 changed files with 619 additions and 770 deletions
@ -1,456 +1,441 @@ |
|||||
<template name="show-modal"> |
<template name="show-modal"> |
||||
<view> |
<view> |
||||
<u-modal v-model="show" :title-style="{color: 'red'}" :title="title" :showTitle="false" |
<u-modal v-model="show" :title-style="{ color: 'red' }" :title="title" :showTitle="false" :showConfirmButton="false" ref="modal"> |
||||
:showConfirmButton="false" ref="modal"> |
<view class="slot-content"> |
||||
<view class="slot-content"> |
<slot name="icon"> |
||||
<slot name="icon"> |
<image class="icon" :src="icon" /> |
||||
<image class="icon" :src="icon" /> |
</slot> |
||||
</slot> |
|
||||
|
<scroll-view scroll-y="true" style="max-height: 200px"> |
||||
<scroll-view scroll-y="true" style="max-height: 200px;"> |
<rich-text class="content" :nodes="content"> </rich-text> |
||||
<rich-text class="content" :nodes="content"> |
</scroll-view> |
||||
</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 class='split_line'></view> |
<view v-if="showCancelButton" class="cance_button" @tap="$u.throttle(cancelClose, 500)"> |
||||
<slot name="button"> |
<text :style="{ color: cancelColor }">{{ cancelText }}</text> |
||||
<view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;"> |
</view> |
||||
<view v-if="showCancelButton" class="cance_button" @tap="$u.throttle(cancelClose, 500)"> |
<u-line direction="col" length="100%"></u-line> |
||||
<text :style="{'color':cancelColor}">{{ cancelText }}</text> |
<view v-if="showConfirmButton" class="confirm_button" @tap="$u.throttle(confirmClose, 500)"> |
||||
</view> |
<text :style="{ color: confirmColor }">{{ confirmText }}</text> |
||||
<u-line direction="col" length="100%"></u-line> |
<text v-if="showConfirmCountdown">({{ seconds }}s关闭)</text> |
||||
<view v-if="showConfirmButton" class="confirm_button" @tap="$u.throttle(confirmClose, 500)"> |
</view> |
||||
<text :style="{'color':confirmColor}">{{confirmText}}</text> |
</view> |
||||
<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text> |
</slot> |
||||
</view> |
</view> |
||||
</view> |
</u-modal> |
||||
</slot> |
</view> |
||||
</view> |
|
||||
</u-modal> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
/** |
/** |
||||
* modal 模态框 |
* modal 模态框 |
||||
* @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作 |
* @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作 |
||||
* */ |
* */ |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
timer: null, |
timer: null, |
||||
show: false, // 是否显示 |
show: false, // 是否显示 |
||||
iconType: '消息', |
iconType: '消息', |
||||
icon: '../../static/icons/error-circle.svg', |
icon: '../../static/icons/error-circle.svg', |
||||
title: '', // 提示标题 |
title: '', // 提示标题 |
||||
content: '', // 提示内容 |
content: '', // 提示内容 |
||||
cancelText: '取消', // 取消按钮的文字 |
cancelText: '取消', // 取消按钮的文字 |
||||
confirmText: '确定', // 确认按钮文字 |
confirmText: '确定', // 确认按钮文字 |
||||
showCancel: true, // 是否显示取消按钮,默认为 true |
showCancel: true, // 是否显示取消按钮,默认为 true |
||||
confirmColor: '#007aff', // 确定按钮颜色 |
confirmColor: '#007aff', // 确定按钮颜色 |
||||
cancelColor: null, // 取消按钮颜色 |
cancelColor: null, // 取消按钮颜色 |
||||
showConfirmButton: true, // 是否显示确认按钮 |
showConfirmButton: true, // 是否显示确认按钮 |
||||
showConfirmCountdown: true, // 是否显示确定倒计时 |
showConfirmCountdown: true, // 是否显示确定倒计时 |
||||
showCancelButton: true, // 是否显示取消按钮 |
showCancelButton: true, // 是否显示取消按钮 |
||||
showClose: false, |
showClose: false, |
||||
confirm: false, //为 true 时,表示用户点击了确定按钮 |
confirm: false, // 为 true 时,表示用户点击了确定按钮 |
||||
cancel: false, //为 true 时,表示用户点击了取消 |
cancel: false, // 为 true 时,表示用户点击了取消 |
||||
seconds: 0, |
seconds: 0, |
||||
success: () => {} // 回调方法 |
success: () => {} // 回调方法 |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
|
methods: { |
||||
methods: { |
open() { |
||||
open() { |
this.show = true |
||||
this.show = true; |
}, |
||||
}, |
close() { |
||||
close() { |
this.$.refs.modal.popupClose() |
||||
this.$.refs.modal.popupClose(); |
}, |
||||
}, |
confirmClose() { |
||||
confirmClose() { |
if (this.show) { |
||||
if (this.show) { |
this.show = false |
||||
this.show = false; |
clearInterval(this.timer) // 清空timer |
||||
clearInterval(this.timer) //清空timer |
this.success({ |
||||
this.$.refs.modal.popupClose(); |
// cancel: false, |
||||
this.success({ |
confirm: true |
||||
// cancel: false, |
}) |
||||
confirm: true, |
} |
||||
}); |
}, |
||||
} |
|
||||
}, |
cancelClose() { |
||||
|
clearInterval(this.timer) // 清空timer |
||||
cancelClose() { |
this.$refs.modal.popupClose() |
||||
clearInterval(this.timer) //清空timer |
this.success({ |
||||
this.$.refs.modal.popupClose(); |
// cancel: true, |
||||
this.success({ |
confirm: false |
||||
// cancel: true, |
}) |
||||
confirm: false, |
}, |
||||
}); |
|
||||
}, |
// 打开消息弹框(确定) |
||||
|
showConfirmMessageModal(mContent, callback) { |
||||
// 打开消息弹框(确定) |
this.showConfirmModal('消息', mContent, callback) |
||||
showConfirmMessageModal(mContent, callback) { |
}, |
||||
this.showConfirmModal("消息", mContent, callback); |
|
||||
}, |
// 打开成功弹框(确定) |
||||
|
showConfirmSuccessModal(mContent, callback) { |
||||
// 打开成功弹框(确定) |
this.showConfirmModal('成功', mContent, callback) |
||||
showConfirmSuccessModal(mContent, callback) { |
}, |
||||
this.showConfirmModal("成功", mContent, callback); |
|
||||
}, |
// 打开失败弹框(确定) |
||||
|
showConfirmFailModal(mContent, callback) { |
||||
// 打开失败弹框(确定) |
this.showConfirmModal('失败', mContent, callback) |
||||
showConfirmFailModal(mContent, callback) { |
}, |
||||
this.showConfirmModal("失败", mContent, callback); |
|
||||
}, |
// 打开警告弹框(确定) |
||||
|
showConfirmWarningModal(mContent, callback) { |
||||
// 打开警告弹框(确定) |
this.showConfirmModal('警告', mContent, callback) |
||||
showConfirmWarningModal(mContent, callback) { |
}, |
||||
this.showConfirmModal("警告", mContent, callback); |
|
||||
}, |
// 打开疑问弹框(确定) |
||||
|
showConfirmQuestionModal(mContent, callback) { |
||||
// 打开疑问弹框(确定) |
this.showConfirmModal('疑问', mContent, callback) |
||||
showConfirmQuestionModal(mContent, callback) { |
}, |
||||
this.showConfirmModal("疑问", mContent, callback); |
|
||||
}, |
// 初始化弹框并打开(确定) |
||||
|
showConfirmModal(mIconType, mContent, callback) { |
||||
// 初始化弹框并打开(确定) |
this.showModal({ |
||||
showConfirmModal(mIconType, mContent, callback) { |
iconType: mIconType, |
||||
this.showModal({ |
content: mContent, |
||||
iconType: mIconType, |
showCancelButton: false, |
||||
content: mContent, |
success(res) { |
||||
showCancelButton: false, |
if (callback != undefined) { |
||||
success: function(res) { |
if (res.confirm == true) { |
||||
if (callback != undefined) { |
callback(true) |
||||
if (res.confirm == true) { |
console.log('用户点击确定') |
||||
callback(true); |
} else { |
||||
console.log('用户点击确定') |
callback(false) |
||||
} else { |
console.log('用户点击取消') |
||||
callback(false); |
} |
||||
console.log('用户点击取消') |
} |
||||
} |
} |
||||
} |
}) |
||||
|
}, |
||||
} |
|
||||
}); |
// 打开消息弹框(取消+确定) |
||||
}, |
showSelectMessageModal(mContent, callback) { |
||||
|
this.showSelectModal('消息', mContent, callback) |
||||
// 打开消息弹框(取消+确定) |
}, |
||||
showSelectMessageModal(mContent, callback) { |
|
||||
this.showSelectModal("消息", mContent, callback); |
// 打开成功弹框(取消+确定) |
||||
}, |
showSelectSuccessModal(mContent, callback) { |
||||
|
this.showSelectModal('成功', mContent, callback) |
||||
// 打开成功弹框(取消+确定) |
}, |
||||
showSelectSuccessModal(mContent, callback) { |
|
||||
this.showSelectModal("成功", mContent, callback); |
// 打开失败弹框(取消+确定) |
||||
}, |
showSelectFailModal(mContent, callback) { |
||||
|
this.showSelectModal('失败', mContent, callback) |
||||
// 打开失败弹框(取消+确定) |
}, |
||||
showSelectFailModal(mContent, callback) { |
|
||||
this.showSelectModal("失败", mContent, callback); |
// 打开警告弹框(取消+确定) |
||||
}, |
showSelectWarningModal(mContent, callback) { |
||||
|
this.showSelectModal('警告', mContent, callback) |
||||
// 打开警告弹框(取消+确定) |
}, |
||||
showSelectWarningModal(mContent, callback) { |
|
||||
this.showSelectModal("警告", mContent, callback); |
// 打开疑问弹框(取消+确定) |
||||
}, |
showSelectQuestionModal(mContent, callback) { |
||||
|
this.showSelectModal('疑问', mContent, callback) |
||||
// 打开疑问弹框(取消+确定) |
}, |
||||
showSelectQuestionModal(mContent, callback) { |
|
||||
this.showSelectModal("疑问", mContent, callback); |
// 初始化弹框并打开(取消+确定) |
||||
}, |
showSelectModal(mIconType, mContent, callback) { |
||||
|
this.showModal({ |
||||
// 初始化弹框并打开(取消+确定) |
iconType: mIconType, |
||||
showSelectModal(mIconType, mContent, callback) { |
content: mContent, |
||||
this.showModal({ |
success(res) { |
||||
iconType: mIconType, |
if (callback != undefined) { |
||||
content: mContent, |
if (res.confirm == true) { |
||||
success: function(res) { |
callback(true) |
||||
if (callback != undefined) { |
console.log('用户点击确定') |
||||
if (res.confirm == true) { |
} else { |
||||
callback(true); |
callback(false) |
||||
console.log('用户点击确定') |
console.log('用户点击取消') |
||||
} else { |
} |
||||
callback(false); |
} |
||||
console.log('用户点击取消') |
} |
||||
} |
}) |
||||
} |
}, |
||||
|
|
||||
} |
// 打开消息弹框(确定+倒计时) |
||||
}); |
showConfirmCountdownMessageModal(mContent, callback) { |
||||
}, |
this.showConfirmCountdownModal('消息', mContent, callback) |
||||
|
}, |
||||
// 打开消息弹框(确定+倒计时) |
|
||||
showConfirmCountdownMessageModal(mContent, callback) { |
// 打开成功弹框(确定+倒计时) |
||||
this.showConfirmCountdownModal("消息", mContent, callback); |
showConfirmCountdownSuccessModal(mContent, callback) { |
||||
}, |
this.showConfirmCountdownModal('成功', mContent, callback) |
||||
|
}, |
||||
// 打开成功弹框(确定+倒计时) |
|
||||
showConfirmCountdownSuccessModal(mContent, callback) { |
// 打开失败弹框(确定+倒计时) |
||||
this.showConfirmCountdownModal("成功", mContent, callback); |
showConfirmCountdownFailModal(mContent, callback) { |
||||
}, |
this.showConfirmCountdownModal('失败', mContent, callback) |
||||
|
}, |
||||
// 打开失败弹框(确定+倒计时) |
|
||||
showConfirmCountdownFailModal(mContent, callback) { |
// 打开警告弹框(确定+倒计时) |
||||
this.showConfirmCountdownModal("失败", mContent, callback); |
showConfirmCountdownWarningModal(mContent, callback) { |
||||
}, |
this.showConfirmCountdownModal('警告', mContent, callback) |
||||
|
}, |
||||
// 打开警告弹框(确定+倒计时) |
|
||||
showConfirmCountdownWarningModal(mContent, callback) { |
// 打开疑问弹框(确定+倒计时) |
||||
this.showConfirmCountdownModal("警告", mContent, callback); |
showConfirmCountdownQuestionModal(mContent, callback) { |
||||
}, |
this.showConfirmCountdownModal('疑问', mContent, callback) |
||||
|
}, |
||||
// 打开疑问弹框(确定+倒计时) |
|
||||
showConfirmCountdownQuestionModal(mContent, callback) { |
// 初始化弹框并打开(确定+倒计时) |
||||
this.showConfirmCountdownModal("疑问", mContent, callback); |
showConfirmCountdownModal(mIconType, mContent, callback) { |
||||
}, |
this.showModal({ |
||||
|
iconType: mIconType, |
||||
// 初始化弹框并打开(确定+倒计时) |
content: mContent, |
||||
showConfirmCountdownModal(mIconType, mContent, callback) { |
showCancelButton: false, |
||||
this.showModal({ |
showConfirmCountdown: true, |
||||
iconType: mIconType, |
success(res) { |
||||
content: mContent, |
if (callback != undefined) { |
||||
showCancelButton: false, |
if (res.confirm == true) { |
||||
showConfirmCountdown: true, |
callback(true) |
||||
success: function(res) { |
console.log('用户点击确定') |
||||
if (callback != undefined) { |
} else { |
||||
if (res.confirm == true) { |
callback(false) |
||||
callback(true); |
console.log('用户点击取消') |
||||
console.log('用户点击确定') |
} |
||||
} else { |
} |
||||
callback(false); |
} |
||||
console.log('用户点击取消') |
}) |
||||
} |
}, |
||||
} |
|
||||
} |
// 打开消息弹框(取消+确定+倒计时) |
||||
}); |
showSelectCountdownMessageModal(mContent, callback) { |
||||
}, |
this.showSelectCountdownModal('消息', mContent, callback) |
||||
|
}, |
||||
// 打开消息弹框(取消+确定+倒计时) |
|
||||
showSelectCountdownMessageModal(mContent, callback) { |
// 打开成功弹框(取消+确定+倒计时) |
||||
this.showSelectCountdownModal("消息", mContent, callback); |
showSelectCountdownSuccessModal(mContent, callback) { |
||||
}, |
this.showSelectCountdownModal('成功', mContent, callback) |
||||
|
}, |
||||
// 打开成功弹框(取消+确定+倒计时) |
|
||||
showSelectCountdownSuccessModal(mContent, callback) { |
// 打开失败弹框(取消+确定+倒计时) |
||||
this.showSelectCountdownModal("成功", mContent, callback); |
showSelectCountdownFailModal(mContent, callback) { |
||||
}, |
this.showSelectCountdownModal('失败', mContent, callback) |
||||
|
}, |
||||
// 打开失败弹框(取消+确定+倒计时) |
|
||||
showSelectCountdownFailModal(mContent, callback) { |
// 打开警告弹框(取消+确定+倒计时) |
||||
this.showSelectCountdownModal("失败", mContent, callback); |
showSelectCountdownWarningModal(mContent, callback) { |
||||
}, |
this.showSelectCountdownModal('警告', mContent, callback) |
||||
|
}, |
||||
// 打开警告弹框(取消+确定+倒计时) |
|
||||
showSelectCountdownWarningModal(mContent, callback) { |
// 打开疑问弹框(取消+确定+倒计时) |
||||
this.showSelectCountdownModal("警告", mContent, callback); |
showSelectCountdownQuestionModal(mContent, callback) { |
||||
}, |
this.showSelectCountdownModal('疑问', mContent, callback) |
||||
|
}, |
||||
// 打开疑问弹框(取消+确定+倒计时) |
|
||||
showSelectCountdownQuestionModal(mContent, callback) { |
// 初始化弹框并打开(取消+确定+倒计时) |
||||
this.showSelectCountdownModal("疑问", mContent, callback); |
showSelectCountdownModal(mIconType, mContent, callback) { |
||||
}, |
this.showModal({ |
||||
|
iconType: mIconType, |
||||
// 初始化弹框并打开(取消+确定+倒计时) |
content: mContent, |
||||
showSelectCountdownModal(mIconType, mContent, callback) { |
showConfirmCountdown: true, |
||||
this.showModal({ |
success(res) { |
||||
iconType: mIconType, |
if (callback != undefined) { |
||||
content: mContent, |
if (res.confirm == true) { |
||||
showConfirmCountdown: true, |
callback(true) |
||||
success: function(res) { |
console.log('用户点击确定') |
||||
if (callback != undefined) { |
} else { |
||||
if (res.confirm == true) { |
callback(false) |
||||
callback(true); |
console.log('用户点击取消') |
||||
console.log('用户点击确定') |
} |
||||
} else { |
} |
||||
callback(false); |
} |
||||
console.log('用户点击取消') |
}) |
||||
} |
}, |
||||
} |
|
||||
} |
// 初始化弹框并打开 |
||||
}); |
showModal(data) { |
||||
}, |
if (data.iconType) { |
||||
|
this.iconType = data.iconType |
||||
// 初始化弹框并打开 |
switch (data.iconType) { |
||||
showModal(data) { |
case '消息': |
||||
if (data.iconType) { |
this.icon = '/static/icons/error-circle.svg' |
||||
this.iconType = data.iconType |
break |
||||
switch (data.iconType) { |
case '成功': |
||||
case '消息': |
this.icon = '/static/icons/checkmark-circle.svg' |
||||
this.icon = '/static/icons/error-circle.svg'; |
break |
||||
break; |
case '失败': |
||||
case '成功': |
this.icon = '/static/icons/close-circle.svg' |
||||
this.icon = '/static/icons/checkmark-circle.svg'; |
break |
||||
break; |
case '警告': |
||||
case '失败': |
this.icon = '/static/icons/warning.svg' |
||||
this.icon = '/static/icons/close-circle.svg'; |
break |
||||
break; |
case '疑问': |
||||
case '警告': |
this.icon = '/static/icons/question-circle.svg' |
||||
this.icon = '/static/icons/warning.svg'; |
break |
||||
break; |
default: |
||||
case '疑问': |
break |
||||
this.icon = '/static/icons/question-circle.svg'; |
} |
||||
break; |
} |
||||
default: |
// image |
||||
break; |
if (data.title) { |
||||
} |
this.title = data.title |
||||
} |
} |
||||
// image |
if (data.content) { |
||||
if (data.title) { |
console.log(data.content) |
||||
this.title = data.title |
this.content = data.content |
||||
} |
} else { |
||||
if (data.content) { |
this.content = '' |
||||
console.log(data.content); |
} |
||||
this.content = data.content; |
if (data.cancelText) { |
||||
} else { |
this.cancelText = data.cancelText |
||||
this.content = '' |
} else { |
||||
} |
this.cancelText = '取消' |
||||
if (data.cancelText) { |
} |
||||
this.cancelText = data.cancelText |
if (data.confirmText) { |
||||
} else { |
this.confirmText = data.confirmText |
||||
this.cancelText = '取消' |
} else { |
||||
} |
this.confirmText = '确定' |
||||
if (data.confirmText) { |
} |
||||
this.confirmText = data.confirmText |
|
||||
} else { |
if (data.showCancel === false || data.showCancel === true) { |
||||
this.confirmText = '确定' |
this.showCancel = data.showCancel |
||||
} |
} else { |
||||
|
this.showCancel = true |
||||
if (data.showCancel === false || data.showCancel === true) { |
} |
||||
this.showCancel = data.showCancel |
|
||||
} else { |
if (data.confirmColor) { |
||||
this.showCancel = true |
this.confirmColor = data.confirmColor |
||||
} |
} else { |
||||
|
this.confirmColor = '#007aff' |
||||
if (data.confirmColor) { |
} |
||||
this.confirmColor = data.confirmColor |
|
||||
} else { |
if (data.cancelColor) { |
||||
this.confirmColor = '#007aff' |
this.cancelColor = data.cancelColor |
||||
} |
} else { |
||||
|
this.cancelColor = '#666F83' |
||||
if (data.cancelColor) { |
} |
||||
this.cancelColor = data.cancelColor |
|
||||
} else { |
if (data.showConfirmButton === false || data.showConfirmButton === true) { |
||||
this.cancelColor = '#666F83' |
this.showConfirmButton = data.showConfirmButton |
||||
} |
} else { |
||||
|
this.showConfirmButton = true |
||||
if (data.showConfirmButton === false || data.showConfirmButton === true) { |
} |
||||
this.showConfirmButton = data.showConfirmButton |
|
||||
} else { |
if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) { |
||||
this.showConfirmButton = true |
this.showConfirmCountdown = data.showConfirmCountdown |
||||
} |
} else { |
||||
|
this.showConfirmCountdown = false |
||||
if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) { |
} |
||||
this.showConfirmCountdown = data.showConfirmCountdown |
|
||||
} else { |
if (data.showCancelButton === false || data.showCancelButton === true) { |
||||
this.showConfirmCountdown = false |
this.showCancelButton = data.showCancelButton |
||||
} |
} else { |
||||
|
this.showCancelButton = true |
||||
if (data.showCancelButton === false || data.showCancelButton === true) { |
} |
||||
this.showCancelButton = data.showCancelButton |
|
||||
} else { |
if (data.success) { |
||||
this.showCancelButton = true |
this.success = data.success |
||||
} |
} else { |
||||
|
this.success = () => {} |
||||
if (data.success) { |
} |
||||
this.success = data.success |
setTimeout((res) => { |
||||
} else { |
this.show = true |
||||
this.success = () => {} |
}, 500) |
||||
} |
if (this.showConfirmCountdown) { |
||||
setTimeout(res => { |
this.startTimer() |
||||
this.show = true; |
} |
||||
}, 500) |
}, |
||||
if (this.showConfirmCountdown) { |
|
||||
this.startTimer(); |
startTimer() { |
||||
} |
this.seconds = 3 |
||||
|
clearInterval(this.timer) |
||||
}, |
this.timer = setInterval(() => { |
||||
|
this.seconds-- |
||||
startTimer() { |
// console.log("倒计时时间", this.seconds); |
||||
this.seconds = 3; |
if (this.seconds <= 0) { |
||||
clearInterval(this.timer) |
this.timeUp() |
||||
this.timer = setInterval(() => { |
} |
||||
this.seconds-- |
}, 1000) |
||||
// console.log("倒计时时间", this.seconds); |
}, |
||||
if (this.seconds <= 0) { |
|
||||
this.timeUp() |
timeUp() { |
||||
return |
// clearInterval(this.timer) |
||||
} |
console.log('时间到') |
||||
}, 1000) |
this.confirmClose() |
||||
}, |
} |
||||
|
} |
||||
timeUp() { |
} |
||||
// clearInterval(this.timer) |
|
||||
console.log('时间到') |
|
||||
this.confirmClose(); |
|
||||
}, |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
|
|
||||
|
|
||||
} |
|
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.slot-content { |
.slot-content { |
||||
font-size: 36rpx; |
font-size: 36rpx; |
||||
display: flex; //弹性布局 |
display: flex; //弹性布局 |
||||
flex-direction: column; //垂直排列 |
flex-direction: column; //垂直排列 |
||||
align-items: center; //子元素居中 |
align-items: center; //子元素居中 |
||||
// background-image: url() |
// background-image: url() |
||||
} |
} |
||||
|
|
||||
.icon { |
.icon { |
||||
width: 70rpx; |
width: 70rpx; |
||||
height: 70rpx; |
height: 70rpx; |
||||
opacity: 1; //透明度 |
opacity: 1; //透明度 |
||||
margin-top: 16px; |
margin-top: 16px; |
||||
} |
} |
||||
|
|
||||
.title { |
.title { |
||||
font-size: 35rpx; |
font-size: 35rpx; |
||||
} |
} |
||||
|
|
||||
.content { |
.content { |
||||
margin-top: 16px; |
margin-top: 16px; |
||||
margin-bottom: 16px; |
margin-bottom: 16px; |
||||
margin-left: 8px; |
margin-left: 8px; |
||||
margin-right: 8px; |
margin-right: 8px; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
text-align: center; |
text-align: center; |
||||
word-wrap: break-word; |
word-wrap: break-word; |
||||
word-break: break-all; |
word-break: break-all; |
||||
white-space: pre-line; |
white-space: pre-line; |
||||
|
} |
||||
|
|
||||
} |
.cance_button { |
||||
|
width: 100%; |
||||
.cance_button { |
margin-top: 10px; |
||||
width: 100%; |
margin-bottom: 10px; |
||||
margin-top: 10px; |
font-size: 32rpx; |
||||
margin-bottom: 10px; |
display: flex; |
||||
font-size: 32rpx; |
justify-content: center; |
||||
display: flex; |
align-items: center; |
||||
justify-content: center; |
} |
||||
align-items: center; |
|
||||
} |
.confirm_button { |
||||
|
width: 100%; |
||||
.confirm_button { |
margin-top: 10px; |
||||
width: 100%; |
margin-bottom: 10px; |
||||
margin-top: 10px; |
font-size: 32rpx; |
||||
margin-bottom: 10px; |
display: flex; |
||||
font-size: 32rpx; |
justify-content: center; |
||||
display: flex; |
align-items: center; |
||||
justify-content: center; |
} |
||||
align-items: center; |
|
||||
} |
.confirm_text { |
||||
|
// color: $uni-color-primary; |
||||
.confirm_text { |
} |
||||
// color: $uni-color-primary; |
|
||||
} |
.def_text { |
||||
|
color: $uni-color-primary; |
||||
.def_text { |
} |
||||
color: $uni-color-primary; |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
@ -1,135 +1,126 @@ |
|||||
<template> |
<template> |
||||
<view> |
<view> |
||||
<uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()"> |
<uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()" :mask-close-able="false"> |
||||
<view class="popup_box"> |
<view class="popup_box"> |
||||
<view class="pop_title uni-flex space-between"> |
<view class="pop_title uni-flex space-between"> |
||||
<view class="" style="font-size: 35rpx;"> |
<view class="" style="font-size: 35rpx"> 扫描 : {{ title }} </view> |
||||
扫描 : {{title}} |
|
||||
</view> |
<view class=""> |
||||
|
<image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" @click="closeScanPopup()"></image> |
||||
<view class=""> |
</view> |
||||
<image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" |
</view> |
||||
@click="closeScanPopup()"></image> |
<view class=""> |
||||
</view> |
<view class=""> |
||||
</view> |
<win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType" :isShowHistory="isShowHistory" :clearResult="true"></win-com-scan> |
||||
<view class=""> |
</view> |
||||
<view class=""> |
</view> |
||||
<win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType" |
</view> |
||||
:isShowHistory="isShowHistory" :clearResult="true"></win-com-scan> |
</uni-popup> |
||||
</view> |
|
||||
</view> |
<comMessage ref="comMessage" @afterClose="getfocus"></comMessage> |
||||
</view> |
</view> |
||||
</uni-popup> |
|
||||
|
|
||||
<comMessage ref="comMessage" @afterClose="getfocus"></comMessage> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import winComScan from '@/mycomponents/scan/winComScan.vue' |
import winComScan from '@/mycomponents/scan/winComScan.vue' |
||||
import { |
import { getContainerByNumber } from '@/api/request2.js' |
||||
getContainerByNumber |
|
||||
} from '@/api/request2.js'; |
export default { |
||||
|
name: 'winScanPack', |
||||
export default { |
components: { |
||||
name: 'winScanPack', |
winComScan |
||||
components: { |
}, |
||||
winComScan, |
props: { |
||||
}, |
title: { |
||||
props: { |
type: String, |
||||
title: { |
default: '箱标签或托标签' |
||||
type: String, |
}, |
||||
default: '箱标签或托标签' |
isShowHistory: { |
||||
}, |
type: Boolean, |
||||
isShowHistory: { |
default: true |
||||
type: Boolean, |
}, |
||||
default: true |
headerType: { |
||||
}, |
type: String, |
||||
headerType:{ |
default: 'HPQ,HMQ,HCQ' |
||||
type: String, |
} |
||||
default: 'HPQ,HMQ,HCQ' |
}, |
||||
} |
data() { |
||||
}, |
return { |
||||
data() { |
show: false |
||||
return { |
} |
||||
show: false, |
}, |
||||
} |
created() {}, |
||||
}, |
methods: { |
||||
created() { |
openScanPopup() { |
||||
|
setTimeout((res) => { |
||||
}, |
this.$refs.popup.open('bottom') |
||||
methods: { |
}, 500) |
||||
openScanPopup() { |
}, |
||||
setTimeout(res => { |
|
||||
this.$refs.popup.open('bottom') |
closeScanPopup() { |
||||
}, 500) |
this.$refs.popup.close() |
||||
}, |
this.$emit('close', '') |
||||
|
}, |
||||
closeScanPopup() { |
|
||||
this.$refs.popup.close(); |
scanClick() { |
||||
this.$emit("close", ''); |
this.$refs.comscan.clickScanMsg() |
||||
}, |
}, |
||||
|
|
||||
scanClick() { |
cancelClick() { |
||||
this.$refs.comscan.clickScanMsg(); |
this.$refs.comscan.clearScanValue() |
||||
}, |
}, |
||||
|
|
||||
cancelClick() { |
getScanResult(result) { |
||||
this.$refs.comscan.clearScanValue(); |
if (result.success) { |
||||
}, |
if (result.label.labelType == 'ContainerLabel') { |
||||
|
this.getContainerByNumber(result) |
||||
getScanResult(result) { |
} else { |
||||
if (result.success) { |
this.$emit('getResult', result) |
||||
if(result.label.labelType=="ContainerLabel"){ |
} |
||||
this.getContainerByNumber(result); |
} else { |
||||
}else { |
this.showMessage(result.message) |
||||
this.$emit("getResult", result); |
} |
||||
} |
}, |
||||
} else { |
|
||||
this.showMessage(result.message) |
getContainerByNumber(result) { |
||||
} |
getContainerByNumber(result.label.container) |
||||
}, |
.then((res) => { |
||||
|
if (res.data.list.length > 0) { |
||||
getContainerByNumber(result){ |
this.$emit('getResult', result) |
||||
getContainerByNumber(result.label.container).then(res => { |
} else { |
||||
if (res.data.list.length > 0) { |
this.showMessage(`未查找到托码【${result.label.container}】`) |
||||
this.$emit("getResult", result); |
} |
||||
} else { |
}) |
||||
this.showMessage('未查找到托码【' + result.label.container + '】'); |
.catch((error) => { |
||||
} |
this.showMessage(error) |
||||
|
}) |
||||
}).catch(error => { |
}, |
||||
this.showMessage(error); |
|
||||
}) |
getfocus() { |
||||
}, |
if (this.$refs.comscan != undefined) { |
||||
|
this.$refs.comscan.getfocus() |
||||
getfocus() { |
} |
||||
if (this.$refs.comscan != undefined) { |
}, |
||||
this.$refs.comscan.getfocus(); |
|
||||
} |
losefocus() { |
||||
}, |
if (this.$refs.comscan != undefined) { |
||||
|
this.$refs.comscan.losefocus() |
||||
losefocus() { |
} |
||||
if (this.$refs.comscan != undefined) { |
}, |
||||
this.$refs.comscan.losefocus(); |
showMessage(message) { |
||||
} |
this.$refs.comMessage.showMessage(message) |
||||
}, |
}, |
||||
showMessage(message) { |
change(e) { |
||||
this.$refs.comMessage.showMessage(message); |
this.show = e.show |
||||
}, |
} |
||||
change(e) { |
} |
||||
this.show = e.show |
} |
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.scroll-view { |
.scroll-view { |
||||
overflow-y: scroll; |
overflow-y: scroll; |
||||
height: auto; |
height: auto; |
||||
max-height: 300rpx; |
max-height: 300rpx; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue