init
This commit is contained in:
砂糖
26
fuintUniapp/components/dialog/data.js
Normal file
26
fuintUniapp/components/dialog/data.js
Normal file
@@ -0,0 +1,26 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
// 标题
|
||||
title: '',
|
||||
// 内容
|
||||
message: ' ',
|
||||
// 选择节点
|
||||
selector: '#zan-dialog',
|
||||
// 按钮是否展示为纵向
|
||||
buttonsShowVertical: false,
|
||||
// 是否展示确定
|
||||
showConfirmButton: true,
|
||||
// 确认按钮文案
|
||||
confirmButtonText: '确定',
|
||||
// 确认按钮颜色
|
||||
confirmButtonColor: '#3CC51F',
|
||||
// 是否展示取消
|
||||
showCancelButton: false,
|
||||
// 取消按钮文案
|
||||
cancelButtonText: '取消',
|
||||
// 取消按钮颜色
|
||||
cancelButtonColor: '#333',
|
||||
// 点击按钮自动关闭 dialog
|
||||
autoClose: true
|
||||
};
|
||||
104
fuintUniapp/components/dialog/dialog.js
Normal file
104
fuintUniapp/components/dialog/dialog.js
Normal file
@@ -0,0 +1,104 @@
|
||||
'use strict';
|
||||
|
||||
var defaultData = require('./data');
|
||||
|
||||
function getDialogCtx(_ref) {
|
||||
var selector = _ref.selector,
|
||||
pageCtx = _ref.pageCtx;
|
||||
|
||||
var ctx = pageCtx;
|
||||
if (!ctx) {
|
||||
var pages = getCurrentPages();
|
||||
ctx = pages[pages.length - 1];
|
||||
}
|
||||
return ctx.selectComponent(selector);
|
||||
}
|
||||
|
||||
function getParsedOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
return Object.assign({
|
||||
// 自定义 btn 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
|
||||
buttons: []
|
||||
}, defaultData, options);
|
||||
}
|
||||
|
||||
// options 使用参数
|
||||
// pageCtx 页面 page 上下文
|
||||
function Dialog(options, pageCtx) {
|
||||
var parsedOptions = getParsedOptions(options);
|
||||
|
||||
var dialogCtx = getDialogCtx({
|
||||
selector: parsedOptions.selector,
|
||||
pageCtx: pageCtx
|
||||
});
|
||||
|
||||
if (!dialogCtx) {
|
||||
console.error('无法找到对应的dialog组件，请于页面中注册并在 wxml 中声明 dialog 自定义组件');
|
||||
return Promise.reject({ type: 'component error' });
|
||||
}
|
||||
|
||||
// 处理默认按钮的展示
|
||||
// 纵向排布确认按钮在上方
|
||||
var _parsedOptions$button = parsedOptions.buttons,
|
||||
buttons = _parsedOptions$button === undefined ? [] : _parsedOptions$button;
|
||||
|
||||
var showCustomBtns = false;
|
||||
if (buttons.length === 0) {
|
||||
if (parsedOptions.showConfirmButton) {
|
||||
buttons.push({
|
||||
type: 'confirm',
|
||||
text: parsedOptions.confirmButtonText,
|
||||
color: parsedOptions.confirmButtonColor
|
||||
});
|
||||
}
|
||||
|
||||
if (parsedOptions.showCancelButton) {
|
||||
var cancelButton = {
|
||||
type: 'cancel',
|
||||
text: parsedOptions.cancelButtonText,
|
||||
color: parsedOptions.cancelButtonColor
|
||||
};
|
||||
if (parsedOptions.buttonsShowVertical) {
|
||||
buttons.push(cancelButton);
|
||||
} else {
|
||||
buttons.unshift(cancelButton);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
showCustomBtns = true;
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
dialogCtx.setData(Object.assign({}, parsedOptions, {
|
||||
buttons: buttons,
|
||||
showCustomBtns: showCustomBtns,
|
||||
key: '' + new Date().getTime(),
|
||||
show: true,
|
||||
promiseFunc: { resolve: resolve, reject: reject },
|
||||
openTypePromiseFunc: null
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
Dialog.close = function (options, pageCtx) {
|
||||
var parsedOptions = getParsedOptions(options);
|
||||
|
||||
var dialogCtx = getDialogCtx({
|
||||
selector: parsedOptions.selector,
|
||||
pageCtx: pageCtx
|
||||
});
|
||||
|
||||
if (!dialogCtx) {
|
||||
return;
|
||||
}
|
||||
|
||||
dialogCtx.setData({
|
||||
show: false,
|
||||
promiseFunc: null,
|
||||
openTypePromiseFunc: null
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = Dialog;
|
||||
148
fuintUniapp/components/dialog/index.js
Normal file
148
fuintUniapp/components/dialog/index.js
Normal file
@@ -0,0 +1,148 @@
|
||||
'use strict';
|
||||
|
||||
var _f = function _f() {};
|
||||
var needResponseOpenTypes = ['getUserInfo', 'getPhoneNumber', 'openSetting'];
|
||||
|
||||
Component({
|
||||
properties: {},
|
||||
|
||||
data: {
|
||||
// 标题
|
||||
title: '',
|
||||
// 自定义 btn 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
|
||||
buttons: [],
|
||||
// 内容
|
||||
message: ' ',
|
||||
// 选择节点
|
||||
selector: '#zan-dialog',
|
||||
// 是否允许滚动
|
||||
isScroll: false,
|
||||
// 按钮是否展示为纵向
|
||||
buttonsShowVertical: false,
|
||||
// 是否展示确定
|
||||
showConfirmButton: true,
|
||||
// 确认按钮文案
|
||||
confirmButtonText: '确定',
|
||||
// 确认按钮颜色
|
||||
confirmButtonColor: '#3CC51F',
|
||||
// 是否展示取消
|
||||
showCancelButton: false,
|
||||
// 取消按钮文案
|
||||
cancelButtonText: '取消',
|
||||
// 取消按钮颜色
|
||||
cancelButtonColor: '#333',
|
||||
key: '',
|
||||
autoClose: true,
|
||||
show: false,
|
||||
showCustomBtns: false,
|
||||
promiseFunc: {},
|
||||
openTypePromiseFunc: {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleButtonClick: function handleButtonClick(e) {
|
||||
var _this = this;
|
||||
|
||||
var _e$currentTarget = e.currentTarget,
|
||||
currentTarget = _e$currentTarget === undefined ? {} : _e$currentTarget;
|
||||
var _currentTarget$datase = currentTarget.dataset,
|
||||
dataset = _currentTarget$datase === undefined ? {} : _currentTarget$datase;
|
||||
|
||||
// 获取当次弹出框的信息
|
||||
|
||||
var _ref = this.data.promiseFunc || {},
|
||||
_ref$resolve = _ref.resolve,
|
||||
resolve = _ref$resolve === undefined ? _f : _ref$resolve,
|
||||
_ref$reject = _ref.reject,
|
||||
reject = _ref$reject === undefined ? _f : _ref$reject;
|
||||
|
||||
// 重置展示
|
||||
|
||||
|
||||
if (this.data.autoClose) {
|
||||
this.setData({
|
||||
show: false
|
||||
});
|
||||
}
|
||||
|
||||
// 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
|
||||
if (this.data.showCustomBtns) {
|
||||
var isNeedOpenDataButton = needResponseOpenTypes.indexOf(dataset.openType) > -1;
|
||||
var resolveData = {
|
||||
type: dataset.type
|
||||
};
|
||||
// 如果需要 openData，就额外返回一个 promise，用于后续 open 数据返回
|
||||
if (isNeedOpenDataButton) {
|
||||
resolveData.openDataPromise = new Promise(function(resolve, reject) {
|
||||
_this.setData({
|
||||
openTypePromiseFunc: {
|
||||
resolve: resolve,
|
||||
reject: reject
|
||||
}
|
||||
});
|
||||
});
|
||||
resolveData.hasOpenDataPromise = true;
|
||||
}
|
||||
resolve(resolveData);
|
||||
return;
|
||||
}
|
||||
|
||||
// 默认按钮，确认为 resolve，取消为 reject
|
||||
if (dataset.type === 'confirm') {
|
||||
resolve({
|
||||
type: 'confirm'
|
||||
});
|
||||
} else {
|
||||
reject({
|
||||
type: 'cancel'
|
||||
});
|
||||
}
|
||||
|
||||
this.setData({
|
||||
promiseFunc: {}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 以下为处理微信按钮开放能力的逻辑
|
||||
handleUserInfoResponse: function handleUserInfoResponse(_ref2) {
|
||||
var detail = _ref2.detail;
|
||||
|
||||
this.__handleOpenDataResponse({
|
||||
type: detail.errMsg === 'getUserInfo:ok' ? 'resolve' : 'reject',
|
||||
data: detail
|
||||
});
|
||||
},
|
||||
handlePhoneResponse: function handlePhoneResponse(_ref3) {
|
||||
var detail = _ref3.detail;
|
||||
|
||||
this.__handleOpenDataResponse({
|
||||
type: detail.errMsg === 'getPhoneNumber:ok' ? 'resolve' : 'reject',
|
||||
data: detail
|
||||
});
|
||||
},
|
||||
handleOpenSettingResponse: function handleOpenSettingResponse(_ref4) {
|
||||
var detail = _ref4.detail;
|
||||
|
||||
this.__handleOpenDataResponse({
|
||||
type: detail.errMsg === 'openSetting:ok' ? 'resolve' : 'reject',
|
||||
data: detail
|
||||
});
|
||||
},
|
||||
__handleOpenDataResponse: function __handleOpenDataResponse(_ref5) {
|
||||
var _ref5$type = _ref5.type,
|
||||
type = _ref5$type === undefined ? 'resolve' : _ref5$type,
|
||||
_ref5$data = _ref5.data,
|
||||
data = _ref5$data === undefined ? {} : _ref5$data;
|
||||
|
||||
var promiseFuncs = this.data.openTypePromiseFunc || {};
|
||||
var responseFunc = promiseFuncs[type] || _f;
|
||||
|
||||
responseFunc(data);
|
||||
this.setData({
|
||||
openTypePromiseFunc: null
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
7
fuintUniapp/components/dialog/index.json
Normal file
7
fuintUniapp/components/dialog/index.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"pop-manager": "../pop-manager/index",
|
||||
"zan-button": "../btn/index"
|
||||
}
|
||||
}
|
||||
18
fuintUniapp/components/dialog/index.wxml
Normal file
18
fuintUniapp/components/dialog/index.wxml
Normal file
@@ -0,0 +1,18 @@
|
||||
<pop-manager show="{{ show }}" type="center">
|
||||
<view class="zan-dialog--container">
|
||||
<view wx:if="{{ title }}" class="zan-dialog__header">{{ title }}</view>
|
||||
<view class="zan-dialog__content {{ title ? 'zan-dialog__content--title' : '' }}">
|
||||
<scroll-view class="zan-dialog__content--scroll" scroll-y="{{ isScroll }}">
|
||||
<text>{{ message }}</text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="zan-dialog__footer {{ buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}">
|
||||
<block wx:for="{{ buttons }}" wx:key="this">
|
||||
<zan-button class="zan-dialog__button" custom-class="{{ index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside' }}" data-type="{{ item.type }}" data-open-type="{{ item.openType }}" open-type="{{ item.openType }}" bind:btnclick="handleButtonClick"
|
||||
bind:getuserinfo="handleUserInfoResponse" bind:getphonenumber="handlePhoneResponse" bind:opensetting="handleOpenSettingResponse">
|
||||
<view style="color: {{ item.color || '#333' }}">{{ item.text }}</view>
|
||||
</zan-button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</pop-manager>
|
||||
79
fuintUniapp/components/dialog/index.wxss
Normal file
79
fuintUniapp/components/dialog/index.wxss
Normal file
@@ -0,0 +1,79 @@
|
||||
.zan-dialog--container {
|
||||
width: 80vw;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.zan-dialog__header {
|
||||
padding: 15px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-dialog__content {
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
line-height: 1.5;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.zan-dialog__content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
border: 0 solid #e5e5e5;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.zan-dialog__content--title {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zan-dialog__content--scroll {
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.zan-dialog__footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zan-dialog__button {
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.zan-dialog__button-inside, .zan-dialog__button-inside--first {
|
||||
margin-bottom: 0;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.zan-dialog__button-inside--first::after, .zan-dialog__button-inside::after {
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.zan-dialog__footer--horizon {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.zan-dialog__footer--horizon .zan-dialog__button-inside::after {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.zan-dialog__footer--vertical .zan-dialog__button-inside::after {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
Reference in New Issue
Block a user