@aliretail/react-link-selector
Version:
420 lines (386 loc) • 13.8 kB
JavaScript
import _Dialog from "@alifd/next/es/dialog";
import _Tab from "@alifd/next/es/tab";
import _Form from "@alifd/next/es/form";
import _Input from "@alifd/next/es/input";
import _Radio from "@alifd/next/es/radio";
import _Message from "@alifd/next/es/message";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import axios from 'axios';
import './index.scss';
import MicroPage from './micro-page';
import Detail from './detail';
import API from './api';
var PAGE_TYPE_MAP = {
outside: 'outside',
detail: 'detail',
microPage: 'microPage'
}; // this.setState({
// keywordName: record.name || record.pageName,
// selectItem: [record.id || record.itemId],
// selectRes: row,
// });
// detail
// this.setState({
// selectItem: [id],
// });
var getUrlParam = function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = decodeURIComponent(window.location.search.substr(1)).match(reg);
if (r != null) return unescape(r[2]);
return null;
};
/**
* 链接选择器
* @author 宋烨
* @date 2020/11/9
* @update 2021/12/3 翊晨
*/
var LinkSelector = /*#__PURE__*/function (_React$PureComponent) {
_inheritsLoose(LinkSelector, _React$PureComponent);
function LinkSelector(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this.tabs = [{
title: '微页面',
key: PAGE_TYPE_MAP.microPage
}, {
title: '商品详情页',
key: PAGE_TYPE_MAP.detail
}, {
title: '外部链接',
key: PAGE_TYPE_MAP.outside
}];
_this.showMessage = function (content, type) {
if (content === void 0) {
content = '';
}
if (type === void 0) {
type = 'error';
}
_Message.show({
type: type,
content: content
});
};
_this.handleClose = function () {
_this.setState({
visible: false
});
};
_this.renderForTabItem = function (key) {
var _this$state = _this.state,
currentPageSelect = _this$state.currentPageSelect,
customLinkType = _this$state.customLinkType,
customLinkValue = _this$state.customLinkValue,
selectItem = _this$state.selectItem,
h5Link = _this$state.h5Link,
appId = _this$state.appId,
appLink = _this$state.appLink,
appCode = _this$state.appCode,
keyword = _this$state.keyword,
keywordName = _this$state.keywordName,
selectedKeyWord = _this$state.selectedKeyWord,
fallbackUrl = _this$state.fallbackUrl; //
var that = _assertThisInitialized(_this);
switch (key) {
case PAGE_TYPE_MAP.microPage:
// 商品详情页
return /*#__PURE__*/React.createElement(MicroPage, {
value: selectItem,
onSelect: function onSelect(val) {
that.setState({
selectItem: val.result
}); // console.log(val);
}
});
case PAGE_TYPE_MAP.detail:
// 商品详情页
return /*#__PURE__*/React.createElement(Detail, {
value: selectItem,
onSelect: function onSelect(val) {
that.setState({
selectItem: val.result
});
console.log('detail change', val);
}
});
case PAGE_TYPE_MAP.outside:
var outsidePageTypeDs = [{
label: 'H5页面',
value: 'h5'
}, {
label: 'AppID小程序',
value: 'app'
}];
var formItemLayout = {
labelCol: {
span: 5
},
wrapperCol: {
span: 19
}
};
return /*#__PURE__*/React.createElement("div", {
style: {
margin: '25px 0 12px'
}
}, /*#__PURE__*/React.createElement(_Radio.Group, {
dataSource: outsidePageTypeDs,
value: customLinkType,
onChange: function onChange(v) {
_this.setState({
customLinkType: v,
fallbackUrl: ''
});
}
}), customLinkType === 'h5' ? /*#__PURE__*/React.createElement("div", {
className: "custom-link__box"
}, /*#__PURE__*/React.createElement(_Form, formItemLayout, /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u94FE\u63A5\u5730\u5740",
labelAlign: "left",
labelTextAlign: "right",
help: "\u5728\u5FAE\u4FE1\u516C\u4F17\u53F7\u53CA\u975E\u5FAE\u4FE1\u73AF\u5883\u7684\u6E20\u9053\u4E2D\u751F\u6548"
}, /*#__PURE__*/React.createElement(_Input, {
value: h5Link,
onChange: function onChange(v) {
return _this.setState({
h5Link: v
});
}
})), /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u975E\u5C0F\u7A0B\u5E8F\u7AEF\u94FE\u63A5",
labelAlign: "left",
labelTextAlign: "right",
help: "\u5728\u975E\u5C0F\u7A0B\u5E8F\u7684\u6E20\u9053\u914D\u7F6E\u8DF3\u8F6C\u751F\u6548"
}, /*#__PURE__*/React.createElement(_Input, {
value: fallbackUrl,
onChange: function onChange(v) {
return _this.setState({
fallbackUrl: v
});
}
})))) : /*#__PURE__*/React.createElement("div", {
className: "custom-link__box"
}, /*#__PURE__*/React.createElement(_Form, formItemLayout, /*#__PURE__*/React.createElement(_Form.Item, {
label: "AppID",
labelAlign: "left",
labelTextAlign: "right"
}, /*#__PURE__*/React.createElement(_Input, {
value: appId,
onChange: function onChange(v) {
return _this.setState({
appId: v
});
}
})), /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u5C0F\u7A0B\u5E8F\u8DEF\u5F84",
labelAlign: "left",
labelTextAlign: "right",
help: "\u5728\u5FAE\u4FE1\u516C\u4F17\u53F7\u53CA\u975E\u5FAE\u4FE1\u73AF\u5883\u7684\u6E20\u9053\u4E2D\u751F\u6548"
}, /*#__PURE__*/React.createElement(_Input, {
value: appLink,
onChange: function onChange(v) {
return _this.setState({
appLink: v
});
}
})), /*#__PURE__*/React.createElement(_Form.Item, {
label: "\u975E\u5C0F\u7A0B\u5E8F\u7AEF\u94FE\u63A5",
labelAlign: "left",
labelTextAlign: "right",
help: "\u5728\u975E\u5C0F\u7A0B\u5E8F\u7684\u6E20\u9053\u914D\u7F6E\u8DF3\u8F6C\u751F\u6548"
}, /*#__PURE__*/React.createElement(_Input, {
value: fallbackUrl,
onChange: function onChange(v) {
return _this.setState({
fallbackUrl: v
});
}
})))));
default:
return '暂无内容';
}
};
_this.handleChangeTab = function (key) {
// 根据key来请求接口
if (key === PAGE_TYPE_MAP.microPage) {
_this.setState({
tabIndex: key,
selectItem: [],
selectRes: [] // });
});
} else if (key === PAGE_TYPE_MAP.detail) {
_this.setState({
tabIndex: key,
selectItem: [],
selectRes: [] // });
});
} else {
_this.setState({
tabIndex: key,
selectItem: [],
selectRes: []
});
}
};
_this.callbackFn = function (fn) {
var _this$state2 = _this.state,
_this$state2$selectRe = _this$state2.selectRes,
selectRes = _this$state2$selectRe === void 0 ? [] : _this$state2$selectRe,
selectItem = _this$state2.selectItem,
h5Link = _this$state2.h5Link,
tabIndex = _this$state2.tabIndex,
customLinkType = _this$state2.customLinkType,
appLink = _this$state2.appLink,
appId = _this$state2.appId,
appCode = _this$state2.appCode,
fallbackUrl = _this$state2.fallbackUrl;
var resp = {
type: tabIndex,
result: tabIndex === PAGE_TYPE_MAP.detail ? selectItem : tabIndex === PAGE_TYPE_MAP.outside ? {
customLinkType: customLinkType,
h5Link: h5Link,
fallbackUrl: fallbackUrl,
appId: appId,
appLink: appLink,
appCode: appCode
} : selectRes
};
console.log(JSON.stringify(resp));
if (tabIndex !== PAGE_TYPE_MAP.outside && resp.result.length === 0) {
return _this.props.dialogProps && _this.props.dialogProps.onCancel(resp);
} else {
return fn && typeof fn === 'function' && fn(resp);
}
};
var _props$visible = props.visible,
visible = _props$visible === void 0 ? false : _props$visible,
data = props.data;
_this.behaviorHistory = {};
_this.state = {
visible: visible,
tabIndex: data.type || PAGE_TYPE_MAP.microPage,
currentPageSelect: '',
selectItem: data.type === PAGE_TYPE_MAP.detail ? data.result : data.result && data.result.length && [data.result[0].id] || [],
selectRes: data.result && data.result.length && data.result || [],
keyword: data.result && data.result.length && data.result[0].id || '',
customLinkType: data.type === PAGE_TYPE_MAP.outside ? data.result.customLinkType || 'h5' : 'h5',
// 自定义链接类型
customLinkValue: '',
// 自定义链接
h5Link: data.type === PAGE_TYPE_MAP.outside ? data.result.h5Link || '' : '',
fallbackUrl: data.result ? data.result.fallbackUrl || '' : '',
appId: data.type === PAGE_TYPE_MAP.outside ? data.result.appId || '' : '',
appLink: data.type === PAGE_TYPE_MAP.outside ? data.result.appLink || '' : '',
appCode: data.type === PAGE_TYPE_MAP.outside ? data.result.appCode || '' : '',
currentLinks: [] // 本页链接不从props 传，直接接口取
};
return _this;
}
LinkSelector.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
// console.log(nextProps, prevState);
if ('visible' in nextProps && nextProps.visible !== prevState.visible) {
return {
visible: nextProps.visible
};
} else {
return prevState;
}
};
var _proto = LinkSelector.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
var _this$props = this.props,
data = _this$props.data,
noSearchDefault = _this$props.noSearchDefault;
var _this$state3 = this.state,
tabIndex = _this$state3.tabIndex,
keyword = _this$state3.keyword; // console.log(tabIndex, keyword, data);
axios.get(API.bizData, {
params: {
storeId: getUrlParam('storeId') || null,
pageId: getUrlParam('pageId')
}
}).then(function (res) {
if (res.data && res.data.success) {
_this2.setState({
bizCode: res.data.result.bizCode,
bizId: res.data.result.bizId
});
} else {
_this2.showMessage('获取验签失败!');
}
});
}
/**
* 关闭弹窗
*/
;
_proto.render = function render() {
var _this3 = this;
var _this$state4 = this.state,
visible = _this$state4.visible,
tabIndex = _this$state4.tabIndex;
var dialogProps = this.props.dialogProps;
return /*#__PURE__*/React.createElement(_Dialog, {
visible: visible,
shouldUpdatePosition: true,
onOk: function onOk() {
var _this3$state = _this3.state,
selectItem = _this3$state.selectItem,
h5Link = _this3$state.h5Link,
tabIndex = _this3$state.tabIndex,
customLinkType = _this3$state.customLinkType,
appLink = _this3$state.appLink,
appId = _this3$state.appId,
appCode = _this3$state.appCode,
fallbackUrl = _this3$state.fallbackUrl;
var res = {
type: tabIndex
};
if (tabIndex === PAGE_TYPE_MAP.detail || tabIndex === PAGE_TYPE_MAP.microPage) {
res.result = selectItem;
} else {
res.result = {
customLinkType: customLinkType,
h5Link: h5Link,
fallbackUrl: fallbackUrl,
appId: appId,
appLink: appLink,
appCode: appCode
};
} // this.setState({ visible: false });
dialogProps.onOk && dialogProps.onOk(res);
},
onCancel: function onCancel() {
return dialogProps.onCancel();
},
onClose: function onClose() {
return dialogProps.onCancel();
},
title: "\u9009\u62E9\u94FE\u63A5",
className: "link-selector link-selector-wrapper-" + tabIndex
}, /*#__PURE__*/React.createElement(_Tab, {
size: "medium",
onChange: this.handleChangeTab,
activeKey: tabIndex
}, this.tabs.map(function (tabItem) {
return /*#__PURE__*/React.createElement(_Tab.Item, {
key: tabItem.key,
title: tabItem.title
}, _this3.renderForTabItem.call(_this3, tabItem.key));
})));
};
return LinkSelector;
}(React.PureComponent);
export { LinkSelector as default };
var host = window.__b_apiHost__ ? window.__b_apiHost__ : location.protocol + "://" + location.host;
LinkSelector.propTypes = {};
LinkSelector.defaultProps = {
data: {},
visible: true,
apis: {},
dialogProps: {}
};