132 lines
5.6 KiB
JavaScript
132 lines
5.6 KiB
JavaScript
/**
|
|
* author: 刘欢
|
|
* date: 20200105
|
|
* 最大二十八个汉字!!!
|
|
* 最大二十八个汉字!!!
|
|
* 最大二十八个汉字!!!
|
|
* **/
|
|
export class show_model {
|
|
constructor(option = {}) {
|
|
this.bodyModel = null;
|
|
this.cancelModel = null;
|
|
this.confirmModel = null;
|
|
this.pageHeight = uni.getSystemInfoSync().screenHeight;
|
|
let opacity = option.opacity || 0.4;
|
|
let model_tit = option.title || global.i18n.t('温馨提示');
|
|
let model_concent = option.content.substr(0, 36) || global.i18n.t("请输入内容~")
|
|
let clickEvent = option.IsclickEvent || false;
|
|
let cancelVal = option.cancelText || global.i18n.t('取消');
|
|
let confirmVal = option.confirmText || global.i18n.t('确认');
|
|
let cancelColor = option.cancelColor || '#999999';
|
|
let confirmColor = option.confirmColor || '#0F7EF5';
|
|
let delCancel = option.delCancel || false;
|
|
let align = option.align || "center";
|
|
let fn = () => { };
|
|
this.$event = option.success || fn;
|
|
let backOff = option.backOff || false;
|
|
|
|
//#ifdef APP-PLUS
|
|
this.creatView({ height: `${this.pageHeight}px`, top: 0 }, opacity, clickEvent, { 'tit': model_tit, 'concent': model_concent, cancelVal, confirmVal, confirmColor, cancelColor, delCancel, align })
|
|
if (!backOff) {
|
|
this.backbtn();
|
|
}
|
|
//#endif
|
|
}
|
|
backbtn() {
|
|
let that = this;
|
|
plus.key.addEventListener('backbutton', function (e) {
|
|
that.hide();
|
|
}, false)
|
|
}
|
|
//生成提示框view
|
|
creatView(style, opa, clickEvent, modelInfo) {
|
|
style = {
|
|
left: '0px',
|
|
width: '100%',
|
|
...style
|
|
}
|
|
|
|
let view = new plus.nativeObj.View('showModalView', style);
|
|
view.draw([
|
|
{ tag: 'rect', id: 'modal', color: `rgba(0,0,0,${opa})`, position: { top: '0px', left: '0px', width: '100%', height: '100%' } },
|
|
{ tag: 'rect', id: 'concent', color: `rgb(255,255,255)`, rectStyles: { borderWidth: '2px', radius: '8px' }, position: { top: '42%', left: '20%', width: '60%', height: '16%' } },
|
|
{ tag: 'font', id: 'title', text: modelInfo.tit, textStyles: { size: '16px', color: '#000' }, position: { top: this.pageHeight * 0.435 + 'px', left: '20%', width: '60%', height: '2%' } },
|
|
{ tag: 'font', id: 'text', text: modelInfo.concent, textStyles: { size: '14px', color: '#666', whiteSpace: 'normal', align: modelInfo.align }, position: { top: this.pageHeight * 0.455 + 'px', left: '23%', width: '54%', height: '8%' } },
|
|
{ tag: 'rect', id: 'line', color: '#EAEAEC', position: { top: '53%', left: '20%', width: '60%', height: '1px' } },
|
|
{ tag: 'rect', id: 'line2', color: '#EAEAEC', position: { top: '53%', left: '49%', width: modelInfo.delCancel ? '0px' : '1px', height: modelInfo.delCancel ? '0px' : '5%' } }
|
|
]);
|
|
|
|
if (!modelInfo.delCancel) {
|
|
// 取消
|
|
let viewCancel = new plus.nativeObj.View('cancel', { width: '30%', height: '5%', top: this.pageHeight * 0.53 + 'px', left: '20%', backgroundColor: 'rgba(255,255,255,0)' });
|
|
viewCancel.draw([
|
|
{ tag: 'font', id: 'cancel', text: modelInfo.cancelVal, textStyles: { color: modelInfo.cancelColor, size: '14px' } },
|
|
]);
|
|
|
|
viewCancel.addEventListener("click", (e) => {
|
|
this.$event({ cancel: true, errMsg: 'showModal:ok' });
|
|
this.hide();
|
|
}, false);
|
|
this.cancelModel = viewCancel;
|
|
}
|
|
|
|
// 确认
|
|
let viewconfirm = new plus.nativeObj.View('confirm', { width: modelInfo.delCancel ? '60%' : '30%', height: '5%', top: this.pageHeight * 0.53 + 'px', left: modelInfo.delCancel ? '20%' : '50%', backgroundColor: 'rgba(255,255,255,0)' });
|
|
viewconfirm.draw([
|
|
{ tag: 'font', id: 'confirm', text: modelInfo.confirmVal, textStyles: { color: modelInfo.confirmColor, size: '14px' } },
|
|
]);
|
|
|
|
viewconfirm.addEventListener("click", (e) => {
|
|
this.$event({ confirm: true, types: 'showModal:ok' });
|
|
this.hide();
|
|
|
|
}, false);
|
|
//点击蒙布
|
|
if (clickEvent) {
|
|
view.addEventListener("click", (e) => {
|
|
this.$event({ cancel: true, errMsg: 'showModal:ok' });
|
|
this.hide();
|
|
}, false);
|
|
}
|
|
this.bodyModel = view;
|
|
this.confirmModel = viewconfirm;
|
|
}
|
|
showModalAnimationClose() {
|
|
var options = { type: 'pop-out', duration: 300 };
|
|
plus.nativeObj.View.startAnimation(options, { view: this.bodyModel }, { view: this.cancelModel }, { view: this.viewconfirm }, function () {
|
|
console.log('plus.nativeObj.View.startAnimation动画结束');
|
|
// 关闭原生动画
|
|
plus.nativeObj.View.clearAnimation();
|
|
});
|
|
}
|
|
showModalAnimationOpen() {
|
|
var options = { type: 'pop-in', duration: 1000 };
|
|
|
|
plus.nativeObj.View.startAnimation(options, { view: this.bodyModel }, { view: this.cancelModel }, { view: this.viewconfirm }, function () {
|
|
console.log('plus.nativeObj.View.startAnimation动画结束');
|
|
// 关闭原生动画
|
|
plus.nativeObj.View.clearAnimation();
|
|
});
|
|
}
|
|
show() {
|
|
|
|
this.showModalAnimationOpen();
|
|
this.bodyModel.show();
|
|
if (this.cancelModel) {
|
|
this.cancelModel.show();
|
|
}
|
|
this.confirmModel.show();
|
|
|
|
}
|
|
hide() {
|
|
this.showModalAnimationClose();
|
|
this.bodyModel.hide();
|
|
if (this.cancelModel) {
|
|
this.cancelModel.hide();
|
|
}
|
|
this.confirmModel.hide();
|
|
}
|
|
}
|
|
|
|
export default show_model
|