Yao 87bf9c9ea7
[improvement] Dialog: 优化弹窗组件对 open 信息的处理 (#366)
* dialog 支持 open-type 的按钮,并增加获取 open 数据的方式

* 增加 dialog 调用 open数据的文档说明

* 增加 dialog close 方法

* 增加文档
2018-07-15 17:37:10 +08:00

112 lines
3.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const _f = function () {};
const needResponseOpenTypes = ['getUserInfo', 'getPhoneNumber', 'openSetting'];
Component({
properties: {},
data: {
// 标题
title: '',
// 自定义 btn 列表
// { type: 按钮类型回调时以此作为区分依据text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
buttons: [],
// 内容
message: ' ',
// 选择节点
selector: '#zan-dialog',
// 按钮是否展示为纵向
buttonsShowVertical: false,
// 是否展示确定
showConfirmButton: true,
// 确认按钮文案
confirmButtonText: '确定',
// 确认按钮颜色
confirmButtonColor: '#3CC51F',
// 是否展示取消
showCancelButton: false,
// 取消按钮文案
cancelButtonText: '取消',
// 取消按钮颜色
cancelButtonColor: '#333',
key: '',
autoClose: true,
show: false,
showCustomBtns: false,
promiseFunc: {},
openTypePromiseFunc: {}
},
methods: {
handleButtonClick(e) {
const { currentTarget = {} } = e;
const { dataset = {} } = currentTarget;
// 获取当次弹出框的信息
const { resolve = _f, reject = _f } = this.data.promiseFunc || {};
// 重置展示
if (this.data.autoClose) {
this.setData({ show: false });
}
// 自定义按钮,全部 resolve 形式返回,根据 type 区分点击按钮
if (this.data.showCustomBtns) {
const isNeedOpenDataButton = needResponseOpenTypes.indexOf(dataset.openType) > -1;
const resolveData = { type: dataset.type };
// 如果需要 openData就额外返回一个 promise用于后续 open 数据返回
if (isNeedOpenDataButton) {
resolveData.openDataPromise = new Promise((resolve, reject) => {
this.setData({ openTypePromiseFunc: { resolve, reject } });
});
resolveData.hasOpenDataPromise = true;
}
resolve(resolveData);
return;
}
// 默认按钮,确认为 resolve取消为 reject
if (dataset.type === 'confirm') {
resolve({
type: 'confirm'
});
} else {
reject({
type: 'cancel'
});
}
this.setData({ promiseFunc: {} });
},
// 以下为处理微信按钮开放能力的逻辑
handleUserInfoResponse({ detail }) {
this.__handleOpenDataResponse({
type: detail.errMsg === 'getUserInfo:ok' ? 'resolve' : 'reject',
data: detail
});
},
handlePhoneResponse({ detail }) {
this.__handleOpenDataResponse({
type: detail.errMsg === 'getPhoneNumber:ok' ? 'resolve' : 'reject',
data: detail
});
},
handleOpenSettingResponse({ detail }) {
this.__handleOpenDataResponse({
type: detail.errMsg === 'openSetting:ok' ? 'resolve' : 'reject',
data: detail
});
},
__handleOpenDataResponse({ type = 'resolve', data = {} }) {
const promiseFuncs = this.data.openTypePromiseFunc || {};
const responseFunc = promiseFuncs[type] || _f;
responseFunc(data);
this.setData({ openTypePromiseFunc: null });
}
}
});